Is it possible to change the text color on hover of a <li> without hovering over the text itself?
For a demo, visit http://jsfiddle.net/EU4cz/
Here is the HTML code:
<nav id="NAv" >
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Employment</a></li>
<li><a href="">Benefits</a></li>
<li><a href="">Forms</a></li>
</ul>
And here is the CSS:
nav#NAv
{
width:192px;
background:#FFF;
padding:0px;
}
nav#NAv a
{
color:#18819c;
}
nav#NAv ul li
{
height: 30px;
width: 192px;
margin: 5px 0px -5px -10px;
padding: 5px 0px 0px 10px;
border-bottom:2px solid #c9dce1;
}
nav#NAv ul li:hover
{
background:#0f7691;
color:#FFF;
}
nav#NAv ul li a:hover
{
color:#FFF;
}