css - 悬停效果不适用于我的文本颜色导航按钮的边框

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

更新 fiddle http://jsfiddle.net/b8M6e/1/