如何更改文字颜色悬停

Question

当我将{I}悬停在<li>上时，如何更改文本颜色。我现在必须将其覆盖在文本上。

演示http://jsfiddle.net/EU4cz/

HTML

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

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

Answer 1

将display:block;和height:100%;添加到您的nav#NAv a链接：

nav#NAv a {
    color:#18819c;
    display:block;
    height:100%;
}

<强> jsFiddle example

默认情况下，链接是内联的，通过使它们阻止并增加高度，它们将占用列表项的空间。