Css 悬停效果未应用于文本颜色的“我的导航”按钮的边框

我有一个我喜欢的导航样式，但是当你越过边界时会有一个小的闪光，背景悬停效果仍然适用，但是文本颜色没有改变。我尝试了各种方法来调整“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>

感谢您提供的任何帮助-这是我的第一个问题，希望我问得对

问题是由这条线造成的

 border: solid medium #898E95;

我刚刚删除了这一行，它解决了这个问题

此外，通过删除该行，您会注意到它会使菜单项比原来的菜单项小一些。要解决此问题，请将以下行添加到a-like so中：

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

---

更新的fiddle

尝试此链接谢谢-我感谢您的帮助，但我希望将边框作为设计的一部分，因此当我将鼠标悬停在框上时，会显示边框，以便将浅蓝色背景从白色页面中偏移。你还有别的想法吗？如果我做不到其他任何东西，我可以减小边框大小以减少效果。

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