リストの上にカーソルを置いたときにアンカーの色を変更する方法

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李aを配置するように試みることができる：ホバースタイル#nav liを前に、次の