WordPress 子菜单显示不正确[重复]

Question

我希望子菜单看起来可见（就像普通的子菜单一样），而不是隐藏在滚动条下，但我卡住了。我也无法正常显示。

http://postimg.org/image/yqe0nz2p7/

    .nav {
      float: right;
      display: inline-block;
      width: auto;
      position: relative;
    }
    .nav > ul > li {
      margin-right: 55px;
      overflow: visible;
    }
    .nav > ul > li > .sub-menu {
      position: absolute;
      padding-left: 0px;
      background-color: #fff;
      border-radius: 2px;
      border: 1px solid #ddd;
      z-index: 2;
    }

<nav class="nav" role="navigation">
  <ul>
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18"><a href="http://www.ubietest.ubieportal.co.uk/web-design/">Web Design</a>
      <ul class="sub-menu">
        <li id="menu-item-992" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-992"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms &#038; Conditions</a> 
        </li>
        <li id="menu-item-993" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-993"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms &#038; Conditions</a> 
        </li>
      </ul>
    </li>
    <li id="menu-item-772" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-772"><a href="http://www.ubietest.ubieportal.co.uk/search-engine-optimization/">Search Optimization</a>
      <ul class="sub-menu">
        <li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms &#038; Conditions</a> 
        </li>
      </ul>
    </li>
    <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://www.ubietest.ubieportal.co.uk/price-plans/">Price Plans</a>
    </li>
    <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://www.ubietest.ubieportal.co.uk/portfolio/">Portfolio</a>
    </li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.ubietest.ubieportal.co.uk/get-quote/">Get quote</a>
    </li>
  </ul>
</nav>

Answer 1

不确定这是否会对您有所帮助，但这是我现在在基于 Bones 的自定义 WordPress 主题中使用的辅助导航。这个浮动是正确的，因为它是我用于社交链接的辅助导航。就我而言，我使用的是图标字体，但设置与我用于带有子菜单的主导航相同。

我所做的是使用display:none; 隐藏子菜单ul，然后在将第一个<li> 悬停时更改为display:block !important;。在下面的示例中，.sN li:hover > ul CSS 是显示子菜单的原因。我为你取出了 _target 空白；）

这是 HTML：

<nav class="socialNav">

    <ul class="sN">
        <li class="socialOpen"><a href="#">9</a>
            <ul class="socialSub">
                <li><a class="ss" href="#">G</a></li>
                <li><a class="ss" href="#">T</a></li>
                <li><a class="ss" href="#">Y</a></li>
                <li><a class="ss" href="#">V</a></li>
                <li><a class="ss" href="#">P</a></li>
                <li><a class="ss" href="#">Z</a></li>
            </ul>
        </li>
    </ul>

</nav>

这是 CSS（抱歉，它有很多样式）：

.socialNav {
    position: relative;
    float: right;
    height: 50px;
    width: 80px;
    border: none
}
.sN {
    margin: 0;
    width: 80px;
    height: 50px
}
.socialNav ul {
    position: relative;
    height: 50px;
    width: 80px;
    margin-top: 0
}
.socialNav li {
    text-align: center;
    width: 80px
}
.socialOpen a {
    display: block;
    font-family: tdp_icons;
    color: #999;
    font-size: 1.7em;
    line-height: 1.2em;
    height: 50px;
    padding: 8px 8px;
    border-left: 1px solid #555
}
.socialNav ul:hover li a:not(.ss) {
    color: #b13838 !important;
    border-left: 1px solid #666
}
.sN li ul {
    border-left: none !important;
    background: #f4f4f4;
    background: rgba(255,255,255,.9);
    display: none
}
.socialSub { border-radius: 0 0 0 14px }
.socialSub li {
    display: block;
    position: relative;
    width: 80px;
    height: 50px;
    border-left: 1px solid #444
}
.socialSub li:last-child {
    border-bottom: 1px solid #444;
    border-radius: 0 0 0 14px
}
.socialSub li a {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 40px;
    border: none
}
.socialSub li a {
    font-family: tdp_icons;
    font-size: 1.7em;
    line-height: 1.7em;
    padding: 0;
    color: #444
}
.sN li:hover > ul {
    display: block !important;
    height: auto
}
.socialNav ul li a:hover { color: #b13838 }

如果这太令人困惑，我可以在有时间的时候去掉多余的样式。有时我确实使用了position:absolute，但在这种情况下我不需要，因为链接是图标，所以所有<ul> <li> 和<a> 标签的宽度都相同。

希望这会有所帮助。