css - 使用伪元素 :before in UL to create a vertical line

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;
}