z-index issue on dropdown menu

[BranCook]

I’m trying to get the background of an active link to display in front of the links dropdown list.

As you can see in the image below, link 3 is displaying on top of the dropdown list for link 2. I want link 2 to behave like link 3 when you hover over it.

Your text to link…

Does the z-index of the element get ignored when the link is active?

[Paulie_D]

We’re going to need to see a live link to help.

Failing that, you could recreate the menu on CodePen

[BranCook]

Thanks,

I’ve set it up over at CodePen

z-index issue

[Paulie_D]

Frankly I suspect you are over-thinking the z-index and positioning.

You say you want the 3rd link to ‘behave’ like the 2nd…how exactly? Unfortunately, there’s something affecting the scroll in Codepen that makes looking at your css quite hard.

[BranCook]

Thanks for the response.

I want the 2nd link to behave like link 3. I want the background color of link 2 to be in front of the dropdown.

I noticed the same thing with the css in CodePen. Is that a CodePen bug? CSS is posted below:

#nav {

width: 645px;

float: right;

clear: none;

margin: 45px 0 0 0;

font-size: 14px;

font-weight: normal;

background: url(../mimbo/images/nav_border.png) no-repeat left;

background-color: #eaeae9;

}



#nav li {

background: url(../mimbo/images/nav_border.png) no-repeat right #eaeae9;

margin-right: 0;

padding: 7px 22px;

}





#nav li a {

text-decoration: none;

color: #464646;

}



/* Begin dropdown styles */



#nav li ul {

margin: 5px 0 0 -24px;

padding: 5px 5px 8px 5px;

-webkit-border-radius: 0px 0px 10px 10px;

border-radius: 0px 10px 10px 10px;

background: #e7e7e6;

border: 1px solid #464646;

}



#nav li ul li {

font-size: 14px;

padding-top: 10px;

}





#nav li ul li ul {

margin: 0;

/*border-left: thin #333 solid;*/

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

}



#nav li li {

/*background: #0c0c0c;*/

color: #464646;

border-bottom: none;

background: none;

}



#nav li li:last-child {

border-bottom: none;

}



#nav li li a/*, #nav-cat li li a:visited, #nav-cat li.current_page_item li a, #nav-cat li.current_page_item li a:visited*/ {

color: #464646 !important;

border: none;

text-transform: none;

padding: 5px 12px !important;

}



.has_children {

background: url(../mimbo/images/navArrow.gif) right no-repeat;

}

























#nav, #nav * {

list-style: none;

z-index:25 !important;

line-height: 1.0;

}



#nav li {

float: left;

list-style:none;

color:#3f4a4f;

margin-right:10px;

position:relative;

z-index:50 !important;

background-color: #eaeae9;

}



#nav li a:hover {

color:#2db9f7 !important;

}





/* Dropdown Menus */



#nav li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}



#nav li:hover ul,

#nav li.sfhover ul {

left: 7px;

}



ul#nav li:hover li ul,

ul#nav li.sfhover li ul {

top: -999em;

}



ul#nav li li:hover ul,

ul#nav li li.sfhover ul {

left: 178px; /* match ul width */

top: 0;

}



ul#nav li li:hover li ul,

ul#nav li li.sfhover li ul {

top: -999em;

}



ul#nav li li li:hover ul,

ul#nav li li li.sfhover ul {

left: 178px; /* match ul width */

top: 0;

}



#nav li ul {

position: absolute;

left: -999em;

height: auto;

width: 200px;

z-index:1 !important;

line-height:1;

-moz-opacity:.98;

opacity:.98;

}



#nav li li {

width: 200px;

/*background: #777;*/

z-index:0 !important;

height:auto;

padding:4px 0;

letter-spacing: 0.06em;

border-bottom:1px solid #848484;

}



#nav li li a, #nav li li a:visited,

#nav li.current_page_parent li.current_page_item a, #nav li.current_page_parent li.current_page_item a:visited {

color:#464646 !important;

/*background: #777 !important;

text-transform:uppercase;

font:0.6em Georgia, "Times New Roman", Times, serif !important;*/

padding:5px 12px !important;

}



#nav li li a:hover, #nav li li a:active,

#nav li.current_page_parent li.current_page_item a:hover, #nav li.current_page_parent li.current_page_item a:active {

color:#2db9f7 !important;

}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}



#nav ul ul {

margin:0 0 0 -4px !important

}

[BranCook]

@jurotek

Thank you for the nice clean code!

[Author]

Posts