由于某种原因,我的WordPress生成的菜单在我尝试显示下拉菜单时出现了一些问题。父菜单项变为全宽,然后覆盖其他项。这是悬停状态下的样子:
下面是对代码的修改:https://jsfidle.net/j55scjeq/
以下是CSS:
/* Navigation */
#nav {
margin: 100px 0;
background-color: #E64A19;
z-index: 999;
overflow: visible;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
#nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
z-index:;
}
/* Positioning the navigation items inline */
#nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #E64A19;
max-width: 200px;
}
/* Styling the links */
#nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* Background color change on Hover */
#nav a:hover {
background-color: #000000;
}
#nav ul li ul {
display: none;
position: absolute;
top: 50px;
z-index: 99;
}
/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
display:block;
position: relative;
z-index: 99;
}
/* Fisrt Tier Dropdown */
#nav ul ul li {
max-width:450px;
display: block;
position: relative;
z-index: 99;
}
下面是HTML:
<nav id="nav"><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-5164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5164"><a href="#">Home</a></li>
<li id="menu-item-2787" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2756 current_page_item menu-item-has-children menu-item-2787"><a href="#">Portfolio</a>
<ul class="sub-menu">
<li id="menu-item-4602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4602"><a href="#">Link one</a></li>
<li id="menu-item-5628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5628"><a href="#">Link two</a></li>
<li id="menu-item-1023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1023"><a href="#">Link three</a></li>
<li id="menu-item-363" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363"><a href="#">Link four</a></li>
<li id="menu-item-1022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1022"><a href="#">Link five</a></li>
<li id="menu-item-362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-362"><a href="#">Link six</a></li>
</ul>
</li>
<li id="menu-item-356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-356"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-5709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5709"><a href="#">Another Link 1</a></li>
<li id="menu-item-358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-358"><a href="#">Another Link 2</a></li>
<li id="menu-item-4883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4883"><a href="#">Another Link 3</a></li>
<li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835"><a href="#">Another Link 4</a></li>
</ul>
</li>
<li id="menu-item-364" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-364"><a href="#">Our clients</a>
<ul class="sub-menu">
<li id="menu-item-4709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4709"><a href="#">Case Studies</a></li>
</ul>
</li>
<li id="menu-item-357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-357"><a href="#">Blog</a></li>
<li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-360"><a href="#">Contact</a></li>
</ul></div></nav>
有人能帮我找到解决办法吗。我只希望子UL显示在一个漂亮的列中,与下面的内容重叠。
我想不通。我不确定这是HTML还是CSS的问题。:/
非常感谢。
您只需将位置:相对
设置为位置:绝对
-
/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
display:block;
position: absolute; /*Or you can simply remove it as you have already declared its position: absolute at #nav ul li ul */
z-index: 99;
}
试试这个,如果有问题请告诉我。
JSFIDDEL-https://jsfidle.net/j55scjeq/2/