Как изменить цвет привязки при наведении курсора на список

Question

У меня есть следующий HTML и CSS.

Когда я наводил курсор на список, я хочу изменить цвет фона и цвет шрифта. Однако мой стиль не меняется, когда я навешиваю надписью список, на границе или возле границы внутри списка.

http://jsfiddle.net/Hbf9D/1/

Как я могу это сделать?

#nav li{ 
    display: inline; 
    text-align: center; 
    list-style-type:none; 
    background-color:#1A365B; 
    margin: 0 6px 0 0; 
    padding: 2px 11px 4px 11px; 

    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
} 

#nav li:hover{ 
    background-color:#E0F1EA; 
    border: 2px solid #000; 
    color: #000000; 
    padding: 0 9px 2px 9px; 
} 

#nav li a:hover{ 
    color: #000000; 
} 

#nav li a{ 
    text-decoration: none; 
    color: #ffffff; 
    font-weight:bold; 
    font-family: 'CantarellBold', Arial, sans-serif; 
    text-transform: capitalize; 
    font-size: 12px; 
} 

<ul id="nav" class="grid_16"> 
    <li><a href="#">FORSIDE</a></li> 
    <li><a href="#">MOBIL</a></li> 
    <li><a href="#">PC OG SERVERE</a></li> 
    <li><a href="#">TJENESTER</a></li> 
</ul> 

Answer 1

попробовать следующее:

#nav li:hover a{ 
    color: #000000; 
} 

http://jsfiddle.net/zainshaikh/Hbf9D/3/

Answer 2

это может показаться странным, но попытаться поставить #nav Ли с: стиль парения, прежде чем #nav Ли с