javascript - 如何防止 CSS transform skew 破坏子元素位置？

Question

考虑这个导航栏在这里工作完美。当您将鼠标悬停在下拉菜单上时，会显示全宽下拉菜单:

http://www.bootply.com/MhEn027pSZ

现在，出于视觉原因，我想向导航栏上的 li 父元素添加倾斜，但它弄乱了下拉菜单并导致它不是全宽:

http://www.bootply.com/N79PbLKa1W

我无法理解为什么会发生这种情况以及如何解决它

Answer 1

您需要为 <a> 应用倾斜在 <ul> 里面, 不适用于 ul :

.has-dropdown a {
    position: relative !important;
    transform: skew(-20deg);
  }