菜單列表的Z索引問題

Question

我有一個下拉菜單，該菜單未顯示在其下方的元素之前。 我已將ul及其容器設置為position：absolute; 和位置：相對； 分別對下拉菜單應用了9999的z-index，但是該菜單不起作用，並且下拉菜單顯示在其下方的div后面。

請在以下JSFiddle中找到以下CSS或CSS和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。