CSS下拉菜單樣式

我怎樣才能擺脫劃分每下面的例子中每個菜單項，但保持活躍菜單的整體外邊框的水平邊界：CSS下拉菜單樣式

http://jsfiddle.net/tdJnS/

事情是這樣的：

enter image description here

來源

2012-01-12 JaJ

刪除li - > a的border-top。

見DEMO這裏

CSS下面變化，

ul#navmenu-h li:hover li a, 
ul#navmenu-h li.iehover li a { 
/*border-top: 1px solid #EEEEEE;*/ <-- Commented 
... 
...

和

ul#navmenu-h li:hover a, 
ul#navmenu-h li.iehover a 
{ 
/*border-top: 1px solid #EEEEEE;*/ <-- Commented 
... 
...

編輯：

如果您將邊框添加到ul並從li > a中刪除margin-left: -1和margin-top: -1，它應該可以工作。

另請注意，刪除保證金會給你從前有什麼不同的感覺。

DEMO這裏

/*newly added - Change to any color to #EEEEEE if that is what you want */ 
ul#navmenu-h ul  
{ 
    border: 1px solid black; 
}

及以下評論，

ul#navmenu-h li:hover li a, 
ul#navmenu-h li.iehover li a { 
/*border-top: 1px solid #EEEEEE; 
border-right: 1px solid #EEEEEE; 
border-left: 1px solid #EEEEEE; 
border-bottom: 1px solid #EEEEEE; 
    margin-left: -1px; */ 


ul#navmenu-h li:hover a, 
ul#navmenu-h li.iehover a 
{ 
/*border-top: 1px solid #EEEEEE;*/ 
/*margin-top: -1px;*/

來源

2012-01-12 22:47:08

嗨，我仍然需要上邊框爲最高主菜單項，所以它看起來像一個選項卡選擇。 – JaJ 2012-01-12 22:51:14

@JaJ：看我的編輯。基本上爲ul添加了邊框，並刪除了左邊和頂部的邊距。 – 2012-01-12 23:17:38

太棒了！你搖滾！ – JaJ 2012-01-12 23:24:18

從這個刪除邊框頂部：

ul#navmenu-h li.iehover li a { 
border-bottom: 1px solid #EEEEEE; 
border-right: 1px solid #EEEEEE; 
border-left: 1px solid #EEEEEE; 
margin-left: -1px; 

float: none; 
background: #FFF; 
font-weight: normal; 
font-size: 10px; 
}

來源

2012-01-12 22:48:23

嗨，除非我錯過了一些事情，否則不會這樣做。看到我的更新最終輸出示例（Facebook喜歡標籤菜單）。 – JaJ 2012-01-12 22:59:46

還有一個你也必須刪除 – 2012-01-12 23:41:55

再次感謝！ .. – JaJ 2012-01-12 23:46:05

CSS下拉菜單樣式

回答

相關問題