HTML / CSS Submenu

Question

I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.

My code is on fiddle here: http://jsfiddle.net/PLb5K/

To do a basic test I have done

#nav ul li ul {
 display: none; }

#nav ul li:hover ul {
 display: block;
 position: absolute; }

UPDATE

    #nav ul:hover .sub {
     display: block;
     position:absolute;
     }

fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.

For example purposes, you should remove the PHP from the HTML, and use the rendered HTML. — Josh Crozier
– Josh Crozier, Commented Dec 19, 2013 at 17:07
anyway I can keep the php? the navigation is an included file. To stick to the rule of 'Duplication Is Evil' — user3120029
– user3120029, Commented Dec 19, 2013 at 17:08
ok what do you want your menu to look like? dropdown? submenus on the right?... — web-tiki
– web-tiki, Commented Dec 19, 2013 at 17:16
do you need an horizontal or vertical menu? your fiddle needs a cleanup, you're using a #nav that isn't there. The UL needs to be "inside" the <li></li> tag, after the <a></a>. The result looks like this: jsfiddle.net/PLb5K/9 is this correct? — Facundo Colombier
– Facundo Colombier, Commented Dec 19, 2013 at 17:17

Facundo Colombier · Accepted Answer · 2013-12-19 17:24:28Z

1

here is a basic html/css example for you:

the fiddle

css

ul  {
    margin: 0;
    padding: 0px 100px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
}

ul li {
    background-color:grey;
    display: inline-block;
    *display: inline; 
    padding:4px 8px;
    margin:0;
    zoom: 1; 

}
ul li a{
    color: white;
    text-decoration:none;
}
ul li ul.sub{
    display:none;
    position:absolute;
    margin-top:4px;
    margin-left:-8px;
}
ul li:hover ul.sub{
    display:block;
}

answered Dec 19, 2013 at 17:24

Facundo Colombier

3,6912 gold badges40 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

HTML / CSS Submenu

1 Answer 1

the fiddle

css

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

the fiddle

css

Comments

Your Answer

Sign up or log in

Post as a guest

Related