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

使用css的水平下拉菜单

1 个答案: