![](/img/trans.png)
[英]advance z-index with positioning drop-down menu over higher div z-index
[英]drop-down css menu behind the actual menu (z-index)
我在子菜单隐藏在菜单的下一行后面时遇到问题。 与
我搜索了许多主题和问题,基本上每个人都在说我需要在子菜单中添加z-index> 100。 我到处都尝试过,那里存在子菜单,但没有任何效果。
您是否知道如何使其正常工作?
这是我的代码:
#header #nav{
float:right;
margin:0px;
position:relative;
z-index:100;
}
#header #nav > li {
display:inline-block;
margin:0;
position:relative;
z-index:100;
}
#header #nav > li > a{
color:#727272;
border:none;
background:none;
font-size:11px;
font-weight:700;
height:60px;
line-height:59px;
display:block;
padding:0 15px;
background:none center bottom;
position:relative;
}
#header #nav > li > a:hover{
color: #0073fe;
}
#nav li ul.sub-menu{
width:210px;
background:#fff;
position:absolute;
border:1px solid #ececec;
border-top:2px solid #0073fe;
margin:0;
top:96%;
padding:0 15px;
display:none;
-webkit-box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
margin-top:2px;
}
#nav li ul.sub-menu > span{
position:absolute;
top:-6px;
left:30px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #0073fe;
}
#nav li ul.sub-menu > li{
margin:0;
width:100%;
display:block;
}
#nav li ul li a{
font-size:11px;
font-weight:700;
display:block;
padding:7px 0px;
color:#727272;
border:none;
border-bottom:1px solid #ececec;
}
#nav li ul li a:hover{
color: #0073fe;
}
#nav li ul li:last-child a{
border-bottom:none !important;
}
#nav li ul li ul.sub-menu{
margin-left: 190px !important;
margin-top: -35px !important;
}
.slogan{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size:34px;
line-height:35px;
text-align:center;
font-weight:300;
letter-spacing: -0.01em;
color:#000;
padding:0px 30px 30px;
}
因此,您需要: submenu > menu
; 这意味着: #nav li ul.sub-menu > #header/#nav
问题是您将菜单设置为较高的z索引,而不是子菜单(结果是: submenu < menu
)。
z-index定义了元素所在的“设置图层”,如果将其设置为高于其他元素,则它将显示在元素上方。
您需要删除#header #nav
和#header #nav>li
z-index,而是将较高的z-index #nav li ul.sub-menu
。
#nav li ul.sub-menu {
z-index: 50; //It doesn't have to be a hundred, 50 should do, or even 5...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.