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

Reply via email to