텍스트 색상 호버 변경 방법

Question

<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

이 nav#NAv a 링크 display:block; 및 height:100%;을 추가

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

jsFiddle example

링크는 기본적으로 인라인, 그리고 그들에게 블록을 만들고 높이를 증가시켜, 그것들은 목록 항목의 공간을 차지합니다.