CODEWITHSUNDEEP
htmlcssmenu
Phil Young
Phil Young

Reputation: 1354

Z-index problems with a menu list

I have a dropdown menu which isn't showing in front of the elements below it. I have set the ul and it's container to position: absolute; and position: relative; respectively and applied a z-index of 9999 to the dropdown, however it won't work and the dropdown appears behind the div below it.

Please find the CSS below or both the CSS & HTML in this JSFiddle. 

#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;
}

Upvotes: 0

Views: 94

Answers (1)

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

Your problem is NOT z-index not working. You have added to your #menu overflow:hidden.

Upvotes: 3

Related Questions