如何在包裝水平多行菜單的行之間放置邊框？

我有一個菜單，基於嵌套，無序列表。所有樣式和顯示都是通過css完成的。如何在包裝水平多行菜單的行之間放置邊框？

菜單被包裹在一個固定寬度的div中。對於某些頂級項目，子菜單包含太多項目，並且這些項目會打包到第二行甚至第三行，從而擴展div高度。這工作正常。

我想要做的是在子菜單項的行之間添加一個水平行/分隔符/邊框，而不考慮行數，並且寬度等於下面或上面的行（最好在下面）。顯然，如果只有一行物品，則不會有線條出現。

我試着沿整個<ul id="submenu">的頂部添加一個背景，然後使用ul#submenu:first-line{}從第一行中刪除它，然後意識到這是無法完成的（headslap）。

然後，我改變了菜單的結構，使用嵌套在div中的<p>元素，再次使用div#submenu:first-line{}，但測試這給了我奇怪的結果。例如，背景顏色將顯示在第一行，但只是子菜單項的高度的一半;背景圖像出現在子菜單項的一半處。有時沒有顯示，直到我點擊當前頂級菜單項。

我甚至嘗試用單個<p>元素替換列表結構，其中包含一系列<a>元素，並獲得了相同的結果。

證據表明，我沒有正確使用:first-line僞元素，但是閱讀網絡表明這應該起作用。

任何關於我在做什麼錯誤的建議，以及如何獲得這些水平線，最好使用CSS和沒有JS？

這裏是我的代碼：

#subMenuContainer { 
    width:100%; 
    margin-top:20px; 
} 
#subMenu { 
    width:600px; 
    margin:0 auto; 
    text-align:center; 
    background:#ddd; 
} 
#sub { 
    border-top:2px solid green; 
    padding:0px; 
    line-height:30px; 
} 
#sub::first-line { 
    border-top:2px solid red; /* doesn't work */ 
    background-color:pink; /* works */ 
    color:yellow; /* doesn't work */ 
} 
#sub p { 
    display:inline-block; 
    padding:0px; 
} 
#sub p a { 
    padding:0px 0px; 
    line-height:1em; 
} 
<div id="subMenuContainer"> 
    <div id="subMenu"> 
     <div id="sub" > 
      <p><a href="#">MenuItem1</a></p> 
      <p><a href="#">MenuItem2</a></p> 
      <p><a href="#">MenuItem3</a></p> 
      <p><a href="#">MenuItem4</a></p> 
      <p><a href="#">MenuItem5</a></p> 
      <p><a href="#">MenuItem6</a></p> 
      <p><a href="#">MenuItem7</a></p> 
      <p><a href="#">MenuItem8</a></p> 
      <p><a href="#">MenuItem9</a></p> 
      <p><a href="#">MenuItem10</a></p> 
     </div> 
    </div> 
</div>

而且the same in jsfiddle.

來源

2012-11-07 Gavin

嘗試建立在http://jsfiddle.net/一個例子，我們可以看到你所要完成的與你有什麼迄今 – Matthematics

感謝您的建議Lübnah，我給什麼去吧。 – Gavin

遲到的反應道歉，Lübnah，@Vaze。這裏是我的例子標記爲div和段落：[鏈接]（http://jsfiddle.net/KhnBT/4/） – Gavin