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