懸停效果不適用於我的導航按鈕的邊框文字顏色

Question

我有我喜歡的樣式的導航，但是有一個小閃光燈，當您越過邊框，其中背景懸停效果仍然適用但文字顏色變化沒有。我嘗試過調整「a」元素（觸發文本更改）的各種方法，並且無論如何調整它的大小，它始終保持在邊框區域內。我也嘗試將顏色更改添加到li：hover部分，但沒有任何效果。

這裏是導航欄：

<div id="leftmenu"> 
    <ul id="sidenav"> 
     <li><a href="">Link 1</a></li> 
     <li><a href="">Link 2</a></li> 
     <li><a href="">Link 3</a></li> 
    </ul> 
</div> 

這是CSS（可能是過於複雜的 - 我已經嘗試了很多不同的東西，這似乎不有所作爲，並沒有將它們全部刪除）：

#leftmenu{ 
    float: left; 
    width: 300px; 
    margin: 10px 0 0 10px; 
} 
ul#sidenav{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
ul#sidenav li{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    border: solid medium #898E95; 
    border-radius: 5px; 
    text-align: center; 
    margin: 5px 0 5px 0; 
    background: #898E95; 
    font-size: 11pt; 
} 
ul#sidenav li a{ 
    width: 295px; 
    text-align: center; 
    line-height: 25px; 
    text-shadow: 1px 1px 0px #283744; 
    text-decoration: none; 
    font-size: medium; 
    font-weight: bold; 
    color: #FFF; 
    display: block; 
} 
ul#sidenav li:hover{ 
    background-color: #E5ECF9; 
} 
ul#sidenav li a:hover{ 
    color: #5C5E64; 
    text-shadow: none; 
} 
#contentright{ 
    margin-left: 320px; 
    padding: 0 20px 0 20px; 
} 

感謝您的任何幫助，您可以提供 - 這是我的第一個問題，希望我問得對！

Answer 1

http://jsfiddle.net/b8M6e/

問題是由該行

border: solid medium #898E95; 

我只是刪除該行並修復該問題產生。

此外，通過刪除該行，您會注意到它使菜單項比您所擁有的要小一些。爲了解決這個問題下面一行添加至A，像這樣：

ul#sidenav li a { 
    padding: 4px; 
} 

更新小提琴http://jsfiddle.net/b8M6e/1/