html - 使用CSS的水平下拉菜单

Question

我正在尝试创建一个具有 3 级子菜单的水平下拉菜单。我几乎创建了所有菜单项。我试图让它更容易被用户理解。如果任何 li 有子菜单，我想放小箭头标记。可以使用 css 吗？我无法得到任何解决方案。请建议我该怎么做？

这是我的示例代码:

     <ul id="menu_new">
    <li><a href="#" class="HeaderLink">Home</a></li>
    <li><a href="#" class="HeaderLink">Applications</a>
        <ul>                                      
            <li><a href="#">Agency</a>
                <ul>
                    <li><a href="/apps/banner/web_links/NVE_South_Agency_PRDv2.ica" >NVE South</a></li>
                    <li><a href="#">NVE North</a></li>
                </ul>
            </li>
            <li><a href="#">Manual Crawl</a></li>
            <li><a href="#">Crawl Interval</a></li>
            <li><a href="#">Archive List</a></li>
        </ul>
    </li>
    <li><a href="#"> Visual Analytics</a></li>
    <li><a href="#">Settings</a>
        <ul>                                      
            <li><a href="#">Manage Subject</a>
                <ul>
                    <li><a href="#" >Add Subject</a></li>
                    <li><a href="#">Edit Subject</a></li>
                    <li><a href="#">Delete Subject</a></li>
                    <li><a href="#">Export Subject</a></li>
                </ul>
            </li>
            <li><a href="#">Manual Crawl</a></li>
            <li><a href="#">Crawl Interval</a></li>
            <li><a href="#">Archive List</a></li>
        </ul>
    </li>
</ul>

Demo

Answer 1

尝试这样的事情:

#menu_new >li:nth-child(2){
    position:relative;
    padding-right:20px;
}
#menu_new >li:nth-child(2):before{
    position:absolute;
    content:'';
    top:14px;
    right:0;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid white;
}

DEMO

如果你想在不止一个地方使用它，你可以创建一个类，即:.arrow 与上面相同的 css。

[class^=arrow]{
    position:relative;
    padding-right:20px;
}
[class^=arrow]:before{
    position:absolute;
    content:'';
    width:0;
    height:0;
}

.arrow-down:before{
    right:0;
    top:14px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid white;
}
.arrow-right:before{
    right:4px;
    top:4px;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:6px solid white;
}

DEMO