javascript - 如何防止CSS转换偏斜破坏子元素位置？

考虑一下此导航栏在这里工作完美。将鼠标悬停在下拉菜单上时，会显示一个全角下拉菜单：

http://www.bootply.com/MhEn027pSZ

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

http://www.bootply.com/N79PbLKa1W

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

最佳答案

您需要为<a>中的<ul>而不是ul应用偏斜：

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