我希望子菜单看起来可见（就像普通的子菜单一样）而不是隐藏在滚动条下，但我已经卡住了。我不能正常地看到它。
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 & 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 & 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 & 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>
答案 0 :(得分：0)
不确定这是否会对您有所帮助，但这是我现在在我的自定义WordPress主题上使用的辅助导航。这是正确的，因为它是我用于社交链接的辅助导航。在我的情况下，我使用的是图标字体，但设置与我用于子菜单的主导航相同。
我所做的是使用display:none;隐藏子菜单ul，然后将第一个更改为<li>的{{1}}悬停。在下面的示例中，display:block !important; CSS正在显示子菜单。我为你拿出了_target空白;）
这是HTML：
.sN li:hover > ul这里是CSS（抱歉它有很多样式）：
<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>
如果这太混乱了，我可以在有空的时候去除额外的造型。有时我会使用.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>标记都是相同的宽度。
希望这有帮助。