[jQuery] Superfish Plugin CSS problem
I have created a menu that when a selection is hovered over, its
background changes to a dark green, and the text becomes white. This
works fine, except when you hover over a selection in a deeper level
of the menu, the background of the parent li stays dark, but the text
returns to its original color, and is unreadable. I can't seem to get
this to work properly. Any suggestions? Thanks!
CSS of menu follows:
.nav, .nav * {
margin:0;
padding:0;
}
.nav {
line-height:1.0;
margin-bottom:1.5em;
width: 150px;
font-size: 0.9em;
}
.nav ul {
background:#fff; /*IE6 needs this*/
width: 150px;
}
.nav li {
background:#c9dcc6;
/*float: left;*/
list-style:none;
position:relative;
width: 150px;
z-index:999;
}
.nav a {
color: #336633;
text-align: left;
font-weight: bold;
display:block;
padding: 5px 0 5px 10px;
text-decoration:none;
width: 140px;
}
.nav li ul {
top:-999em;
position:absolute;
width:160px;
border: 1px solid #aaa;
}
.nav li:hover,
.nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
background:#336633;
color: #fff;
}
.nav li:hover ul, /* pure CSS hover is removed below */
ul.nav li.sfHover ul {
left:150px;
top:0px;
}
.nav li:hover li ul,
.nav li.sfHover li ul {
top:-999em;
}
.nav li li:hover ul, /* pure CSS hover is removed below */
ul.nav li li.sfHover ul {
left:150px;
top:0px;
}
.nav li li:hover li ul,
.nav li li.sfHover li ul {
top:-999em;
}
.nav li li li:hover ul, /* pure CSS hover is removed below */
ul.nav li li li.sfHover ul {
left:150px;
top:0px;
}
/*following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears*/
.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
top: -999em;
}
.nav li li {
background:#c9dcc6;
width:160px;
}
.nav li li li {
background:#c9dcc6;
}
.nav li li a {
padding-right:0;
width:150px;
}