WordPress子菜单将不会显示为可见,而是在标题中显示滚动条 [英] WordPress sub-menu will not appear visible and instead appears with scrollbar in header
问题描述
我想让子菜单显示为可见(像一个正常的子菜单),而不是隐藏在滚动条下,但我已被卡住
I would like the sub-menu to appear visible (like a normal sub-menu) instead of hiding under a scroll bar but I have become stuck
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 & 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>
推荐答案
您可能应该设置 position :relative;
添加到包含下拉菜单< ul>
的元素。现在子菜单是绝对的 .nav
元素。
You probably should set position: relative;
to the element, that contains the dropdown menu <ul>
. Right now the submenu is absolute to .nav
element.
此外,还有 overflow :visible; 为
.nav>编写的规则。 ul> li
,你也可以检查一下。它创建了水平滚动,我认为这是不必要的。
Also, there is overflow: visible;
rule written for .nav > ul > li
, you might want to check that as well. It creates the horizontal scrolling, and I think it's unnecessary.
这篇关于WordPress子菜单将不会显示为可见,而是在标题中显示滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!