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