CSS下拉菜单样式

Question

如何删除按以下示例划分每个菜单项的水平边框，但保留活动菜单的整个外边框：

http://jsfiddle.net/tdJnS/

这样的事情：

Answer 1

从li中移除border-top - ＆gt;一个。

在此处查看 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添加边框并从margin-left: -1中移除margin-top: -1和li > a，则该工作正常。

另请注意，删除保证金将会产生与以前不同的感觉。

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

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