下拉菜单边框

Question

我正在尝试创建一个简单的下拉菜单。我目前看起来像下面这样：http://jsfiddle.net/Wt9UC/

现在，我打算实现的更多的是Fiverr的内容，请参阅参考资料。

为了澄清，我正在试图获得边框（顶部，左，右）在菜单项徘徊和各地分项目的整个框出现在悬停。如果我的措词不清楚，以下图片可能会有所帮助。

我试着用层玩弄（例如使子项到前面的边界线的希望被覆盖），但它没有工作得非常好。

我的HTML：

<ul id="menu"> 
    <li><a href="#">Test</a> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
     </ul> 
    </li> 
</ul> 

我的CSS：

#menu a { 
    color: black; 
} 

#menu { 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    height: 30px; 
} 

#menu li { 
    float: left; 
} 

#menu li a { 
    padding: 9px 20px; 
    display: block; 
    text-decoration: none; 
    font-size: 12px; 
} 

#menu a:hover { 
    color: #c5cbc9; 
    border-radius: 3px; 
    border-left: 1px solid; 
    border-top: 1px solid; 
    border-right: 1px solid; 
} 

/* Submenu */ 
#menu ul { 
    border-radius: 3px; 
    border: 1px solid; 
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    list-style-type: none; 
} 

#menu li:hover { /*had bg*/ 
    position: relative; 
} 

#menu li:hover ul { /*had bg*/ 
    left: 0px; 
    top: 30px; 
    padding: 0px; 
} 

#menu li:hover ul li a { 
    padding: 5px; 
    display: block; 
    width: 168px; 
    text-indent: 15px; /*had bg*/ 
} 

#menu li:hover ul li a:hover { 
    text-decoration: underline; 
} 

感谢您的时间！

Answer 1

这是一个完整的教程，用于构建一个Mega菜单。希望这可以帮助。

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

演示链接：在 “4列” http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html

哈弗/那是你的确切需求量的/

Answer 2

ü需要做到以下几点：

添加“下边框：1px solid #FFF“到您的”#menu li a {}“，然后将您的下拉1px向上移动。

link to fiddle http://jsfiddle.net/cL2x7/