使用僞元素：在UL之前創建一條垂直線

Question

我正在創建一個可以具有子菜單的垂直菜單。對於這些，我試圖通過使用CSS僞元素::before和border來添加垂直線。

我面臨的問題是，CSS正在應用於整個菜單而不是特定的子菜單。

我認爲問題在於使用position: absolute;，但沒有它，邊界永遠不會顯示。

下面是代碼，你可以檢查這個問題JsFiddle。

<ul id="test-ul"> 
    <li><a>one</a></li> 
    <li> 
     <a>two</a> 
     <ul class="submenu"> 
      <li><a>sub one</a></li> 
      <li><a>sub two</a></li> 
      <li><a>sub three</a></li> 
     </ul> 
    </li> 
    <li><a>three</a></li> 
    <li><a>four</a></li> 
    <li><a>five</a></li> 
</ul> 

<style> 
    /* reset defaults */ 
    ul { list-style: none; } 

    /* apply style to menu */ 
    #test-ul { 
     background-color: #eee; 
     border-color: #ccc; 
     position: absolute; 
    } 

    /* style links */ 
    #test-ul > li a { 
     color: #2b7dbc; 
     border-top-color: #e4e4e4; 
     background-color: #fff; 
     display: block; 
     padding: 7px 0 9px 20px; 
     border-top-width: 1px; 
     border-top-style: dotted; 
    } 

    /* do CSS3 magic and show a vertical border on the left of each submenu item */ 
    #test-ul > li > ul::before { 
     content: ""; 
     display: block; 
     position: absolute; 
     z-index: 1; 
     left: 18px; 
     top: 0; 
     bottom: 0; 
     border: 1px dotted; 
     border-width: 0 0 0 1px; 
    } 
</style> 

Answer 1

，只需提供.submenu的relative

.submenu{ 
    position: relative; 
}