Web ページの CSS メニュー バーを作成しました。しかし、「マイ プレゼンテーション」リンクにマウスを移動すると、左側の境界線が表示されません。現在、「私のお気に入り」リンクが選択されています。「私のお気に入り」リンクに左側の灰色の境界線が表示されないことに注意してください。しかし、マウスを「Friend's Favorite」リンクに移動すると、右側の境界線が「My Favorite」リンクに表示されます。左側の境界線を表示する必要があります。
ここにリンクがあります:- jsFiddle リンク
<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; }