Add sub menu using css in html

Question

I'm trying to add a sub menu using css. When I hover my mouse over the a link "Top Menu", I want a sub menu to appear. See the code at here

    <div id="navbar"> <span class="navbutton">
                <a id="button-1" href="#">Shop</a>
            </span>
 <span class="navbutton">
                   <a href="#">
                       Test1</a>   
                </span>
 <span class="navbutton"><a id="button-3" href="#">Top Menu</a>
    </span>
 <span class="navbutton"><a id="button-4" href="#">Test1</a>
    </span>
 <a class="linefreak"></a><a class="linefreak"></a>
 <span class="navbutton"><a id="button-5" href="#">Test2</a>  
    </span>
</div>

Any help is much appreciated. Thanks

SW4 · Accepted Answer · 2014-03-13 14:53:53Z

2

Demo Fiddle

The below should get you started- note you're likely better off using lists (ul, li) for this type of setup.

HTML

<ul>
    <li>Shop</li>
    <li>Test1</li>
    <li>Top Menu
        <ul>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
        </ul>
    </li>
    <li>Test1</li>
    <li>Test2</li>
</ul>

CSS

ul {
    list-style:none;
    background:green;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    padding:10px 10px;
}
ul li ul {
    display:none;
    position:absolute;
}
ul li ul li {
    display:block;
}
ul li:hover ul {
    display:block;
}

answered Mar 13, 2014 at 14:53

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Armel Larcier Over a year ago

This is not keyboard accessible but still... +1

Armel Larcier Over a year ago

Adding "ul li a:hover + ul{display: block;}" would be helpful

stetro · Accepted Answer · 2014-03-13 15:04:45Z

0

SW4 is right.. and for your example here the fiddle:

http://jsfiddle.net/fm7Ct/4/

.navbutton:hover #button-3+.submenu{
    display:inline;
}
.submenu{
    display:none;
}

edited Mar 13, 2014 at 15:04

answered Mar 13, 2014 at 14:59

stetro

5472 gold badges6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add sub menu using css in html

2 Answers 2

Demo Fiddle

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related