菜单的CSS变换倾斜

Question

我试图在标题中创建一个倾斜的下拉菜单。似乎倾斜在主导航项上工作正常，但下拉菜单不起作用。当我移除斜度时，下拉菜单就可以工作了。

下面是我的代码:

#header .menu > li {
    background-color: #959595 !important;
    -ms-transform: skew(20deg);
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
    z-index: 99 !important;
}
#header ul.menu li:hover>ul,
#header ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
    z-index: 999 !important;
    position: absolute;
    left: auto;
}
#header .menu li a.sf-with-ul {
    padding-right: 25px;
}

还有，这里是当前网站的链接:

wordpress网站

请帮…

Answer 1

尝试将您的歪斜应用于'a'标签而不是'li'标签。你的第一关导航将是倾斜的，但你的第二关不会，当你将鼠标悬停在它上面时，它们将是可见的。

li a {
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
  background-color: #959595 !important;
}

<li id="menu-item-56" class="skewed-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-56">
  <a href="http://360industrialmovers.com/wordpress/about/" class="sf-with-ul">About<span class="sf-sub-indicator"> »</span></a>
  <ul class="sub-menu" style="display: none;">
    <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="http://360industrialmovers.com/wordpress/about/360-client-guarantee/">360 Client Guarantee</a>
    </li>
  </ul>
</li>