我爲我的網頁創建了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; }
嘿當前菜單項的高度相比其他人有點大。你是否需要這種方式 –