Question

我有一个下拉菜单，它没有显示在它下方的元素前面。我已将ul和它的容器设置为position：absolute;和位置：相对;分别在下拉菜单中应用了一个9999的z指数，但它不会起作用，下拉列表会显示在它下面的div后面。

请在下方找到CSS或同时找到CSS＆amp;此JSFiddle中的HTML。

#menu {
overflow: hidden;
padding: 0 0 9px 0;
}

#menu ul {
padding-top: 8px;
}

#menu li {
width: 160px;
float: left;
text-align: center;
position: relative;
}

#menu li:after {
width: 1px;
height: 9px;
background: #9098bf;
position: absolute;
top: 5px;
left: 0;
content: "";
}

#menu li:first-child:after {
display: none;
}

#menu li ul li:after {
display: none;
}

#menu li ul:after {
content: "";
height: 1px;
clear: both;
 }

#menu > .container > ul > li > ul {
left: 0;
}

#menu li ul {
position: absolute;
right: -100%;
left: 100%;
z-index: 9999;
background-color: #67b9e8;
}

#menu a {
font-size: 10px;
text-transform: uppercase;
line-height: 12px;
color: #22317f;
font-family: 'FuturaBT-Book';
}
#menu a:hover {
text-decoration: none;
color: #67b9e8;
}

 .features {
background: #22317f;
padding-top: 38px;
padding-bottom: 33px;
overflow: hidden;
margin-bottom: 44px;
}

.features .left {
width: 640px;
float: left;
border-right: 1px dotted #fff; 
color: #fff;
margin-bottom: -3px;
padding-right: 57px;
text-align: justify;
}

h1 {
font-size: 55px;
line-height: 50px;
margin: 10px 0 29px 0;
text-align: left;
letter-spacing: -3px;
font-family: 'FuturaBT-Book';
color: #193889;
}
ul, li {
list-style: none;
}

Answer 1

你的问题不是z-index不能正常工作。您已添加到#menu overflow：hidden。

菜单列表的Z-index问题

1 个答案: