使用伪元素：在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; 
}