CSS下拉菜單樣式

Question

在以下示例中，如何擺脫將每個菜單項划分為水平的邊框，但保持活動菜單的整體外部邊框：

http://jsfiddle.net/tdJnS/

像這樣：

Answer 1

從li上刪除border-top-> a。

在這里查看演示

下面的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 ，它應該可以工作。

另外請注意，刪除邊距會給您與以前不同的感覺。

在這里演示

/*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;*/

Answer 2

從此刪除border-top：

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; 
}