Having a serious mental block on this. I've got a vertical drop-down nav bar based off of the suckerfish example. I have the background color of the top <li> elements set and am trying to use an image as the background for the <li><ul> element.
The background color from the top level <li> displays on the lower level <li> elements in the drop-down. Anyone have an idea about how to stop the inheiritance?
CSS here:
The background color from the top level <li> displays on the lower level <li> elements in the drop-down. Anyone have an idea about how to stop the inheiritance?
CSS here:
Code:
.nav
{
position:absolute;
left:370px;
top:60px!important;
top:67px;
height:90px;
width:620px;
margin-bottom: 25px;
margin-left:0px;
color:#929091;
font-family:Bitstream Vera Serif;
vertical-align:middle;
font-size: medium;
z-index:2;
}
.nav ul {
padding: 0;
margin:0;
list-style: none;
}
.nav li {
float: left;
position: relative;
background-color:#0072BA;
padding-top:5px;
padding-bottom:5px;
border-right:solid 3px #fff;
}
.nav li ul {
display: none;
margin-top:6px;
position: absolute;
left: 0;
width:130px!important;
width:90px;
background: url("images/dd_menu_bg.gif") bottom left no-repeat;
border-bottom:none;
}
.nav li > ul
{
top: auto;
left: auto;
}
.nav li ul li
{ clear:both;
border-right:none 0px;
margin-top:0px;
}
.nav li ul li a
{color:#fffde0;
}
.nav li:hover ul, .nav li.over ul
{display: block;
}
.nav a {
display:block;
padding:5px 15px;
color:#231F20;
font-size:smaller;
font-weight:700;
text-decoration:none;
}