我为自己的网页创建了CSS菜单栏。但是当某人在“我的演示文稿”链接上移动鼠标时，左侧边框不会显示。目前选择“我最喜欢的”链接。请注意左侧灰色边框未显示在“我最喜欢的”链接上。但是当你在“朋友的最爱”链接上移动鼠标，然后右侧边框显示在“我最喜欢的”链接上。我需要显示左侧边框。
这是链接： - jsFiddle Link
<ul class="menu" style="margin-top:20px;">
<li><a href="#">Home</a></li>
<li><a href="my-presentations.htm">My Presentations</a></li>
<li class="current"><a href="myFavorite.htm">My Favorite</a></li>
<li><a href="#">Friend's Favorite</a></li>
<li><a href="#">Most Viewed</a></li>
<li><a href="#">Sync account</a></li>
</ul>
/* NAVBAR CSS START HERE */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
.menu {height: 30px;width: 759px;background: #3B5998;border:1px solid #e1e1e1; border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px}
.menu li {position: relative;list-style: none;float: left;display: block;height: 30px;}
.menu ul { display: none;}
.menu li a{display: block;padding: 0 14px;line-height: 30px;text-decoration: none;font-family: Tahoma;font-weight: bold;font-size: 11px;color: #f9f9f9;border-left:1px solid #8698C0;}
.menu li:hover > a{ color: #9a9a9a; background:#fff; border-left:1px solid #ccc;}
.menu li a.first{border-left:0px; background:#ffvv00;}
.menu li.current a{border:0px; height:31px;color: #9a9a9a; background:#fff; margin-top:-3px; padding-top:3px; padding-bottom:4px;border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-top-right-radius:5px;-moz-border-radius-topright:5px;}
.menu li:first-child a:hover{border-top-left-radius:5px;-moz-border-radius-topleft:5px; border-right:1px #ccc solid; margin-right:-1px;}
.menu li:last-child a{border-right: none; }