Horizontal drop down menu using css

debugcn 投稿 Dev

Sandeep Reddy K.

I am trying to create a horizontal drop down menu with 3 levels of sub menus. I have almost created all menu items. I am trying to make it more understandable to user. I want to put small arrow mark if the any li has sub menu. Is it possible to do using css? I am unable to get any solution. Please suggest me what to do?

Here is my example code:

     <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

Gildas.Tambo

Try something like this:

#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

and if you want to use it on more that one place you can create a class ie: .arrow with the same css above.

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