Re: z-index issue on dropdown menu

[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

}