下拉菜單邊框

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/