使用伪元素:before在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>

- Luís Cruz

---

试试这个 - http://jsfiddle.net/d6tmLpy0/ 或者 http://jsfiddle.net/k7xdma3e/ - Anonymous

Answer 1

只需将.submenu的位置设置为relative

.submenu{
    position: relative;
}

- jleggio