I have a nested unordered list structure whereby the <li> background colors change from orange to green on hover. The color change takes effect on the current <li> item as well as on any ascendant <li>'s which the list may be nested within. See below CSS and HTML code:
<style type="text/css">
.menu li{
color: green;
}
.menu li{
background:orange;
}
.menu li:hover{
background: lightgreen;
}
.menu li:hover{
color:white;
}
</style>
So for example, while hovering "Level 3 link 2", its background goes green and the background of "Level 2 link 2" and "Level 1 link 1" stays green as well while in that same hovered state. This is the intended effect for my list structure, which looks as follows:
<div class="menu">
<ul>
<li><a href="1.1.html">Level 1 link 1</a> <-- also stays green
<ul>
<li><a href="2.1.html">Level 2 link 1</a></li>
<li><a href="2.2.html">Level 2 link 2</a> <-- also stays green
<ul>
<li><a href="3.1.html">Level 3 link 1</a></li>
<li><a href="3.2.html">Level 3 link 2</a></li> <- hover here goes green
<li><a href="3.3.html">Level 3 link 3</a></li>
<li><a href="3.4.html">Level 3 link 4</a></li>
</ul>
</li>
<li><a href="2.3.html">Level 2 link 3</a></li>
</ul>
</li>
</ul>
</div>
I found the background change works as intended by the combination of these two style rules:
.menu li {background:orange;}
and:
.menu li{color: green;} because
For example, had I left out the li {background:orange} rule, then the whole menu would go green regardless of which one item is hovered for some reason. So with both rules, any non-hovered <li>'s or blocks of <li>'s instead falls back to their original orange, as intended.
Additionally, I would like the linked texts of the hovered <li>'s to change to white including the linked texts within any ascending <li>'s. In other words, the same links whose backgrounds currently go green should become white while their backgrounds remain green. In fact, had none of the items in the list been actual links but plaintext, the hovering effect would work exactly as intended. Plaintext (non-link) fonts change to white by the li:hover{color:white} declaration. The intended effect is partly seen in the <li> discs or bullets that prefix the linked texts, which correctly change to white.
How can I also affect the linked texts in the same way?
Many thanks for any advise.
Many thanks,
Tuxedo
PS: The backgrounds of the <li>'s of the above example do not change in IE9, at least not without a n IE/CSS hover emulator such as one at [
xs4all.nl...] . Anyhow, IE9 is not important for the purpose of this list.
