菜单的 CSS 变换倾斜答案

【问题标题】：CSS transform skew for menu菜单的 CSS 变换倾斜
【发布时间】：2015-06-04 20:48:49
【问题描述】：

我正在尝试在带有下拉菜单的标题中创建倾斜菜单。似乎倾斜在主要导航项目上正常工作，但下拉菜单不起作用。当我删除倾斜时，下拉菜单起作用。

这是我的代码：

#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 site

请帮忙...

【问题讨论】：

标签： css menu html-lists transform skew

【解决方案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>

【讨论】：

谢谢艾米，我试试看！