2012-11-17 98 views
0

我爲我的網頁創建了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; } 
+0

嘿當前菜單項的高度相比其他人有點大。你是否需要這種方式 –

回答

1

做了很多修改代碼,它更好地採取看看演示

New Demo

注: 我不確定,爲什麼你讓你的主動元素比他高呃元素,他們有一些圓潤的邊緣。它看起來很奇怪

+0

感謝您的回覆......但它不是正確的。你有沒有看到第一個鏈接的左側邊界。我需要當前選定的鏈接很少。這就是爲什麼我給了-3上邊緣。我認爲你已經刪除-3頂部邊緣...但我需要顯示選定的鏈接小大,然後其他鏈接... – Gaurav

+0

檢查演示現在,改變了一下 –

+1

哇..謝謝Syed ..它現在的作品.. 。感謝Syed的幫助...我會告訴你一些時間,當我的頁面完成時,請告訴我它的外觀好不好.. :)謝謝... – Gaurav

相關問題