菜单列表的 Z-index 问题

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 溢出：隐藏。