html - WordPress 子菜单将不可见，而是在标题中显示滚动条

Question

我希望子菜单显示可见(像普通子菜单一样)而不是隐藏在滚动条下，但我被卡住了

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

CSS

.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;

}

HTML:

<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

您可能应该设置 position: relative;到包含下拉菜单的元素 <ul> .现在子菜单是绝对的 .nav元素。

此外，还有 overflow: visible;为 .nav > ul > li 编写的规则，您可能还想检查一下。它创建了水平滚动，我认为这是不必要的。