Changing font color of <a> contained within <li>, but on hover over <li>

Question

I have a <li> that contains an <a href>

<li><a href="http://site.com">Page</a></li> 

I'd like to change the background color and text color of each <li> item as it's hovered over. I found that the background color is best changed by targetting the li:hover and not the a:hover because the a:hover changes the background of only a small portion of the line (the part that has the <a> text).

li:hover { background-color:green; } 

What I'd also like to do is change the font color (that's the <a>). When I do it the first way below, it has no effect on the <a> text color. And when I do it the second way below, I'd have to hover specifically on the <a> for the font color to change, not just anywhere in the <li> bullet line.

li:hover { background-color:green; color:red; } //first way a:hover { color:red; } //second way 

Is there a way with css to change the font color of the contained <a href> when the <li> is hovered over? again, this is what the html markup looks like:

<li><a href="http://site.com">Page</a></li> 

Answer 1

li:hover a { color: red } 

:hover documentation.

IE5/6 only support :hover on links, so make sure you're not testing on those browsers.

Answer 2

The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>:

li a { display: block; } li a:hover { background-color: green; }