how to display sub menu on horizontal css menu

Question

I have this CSS Menu:

but i cannot work out what css code i need for the hover:

#nav li a:hover

kingkode · Accepted Answer · 2014-05-15 20:17:39Z

1

trigger the hover on your li element. Don't forget to set your submenu position to absolute

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

http://jsfiddle.net/73GrF/4/ (edited fiddle with crude dropdown styling. ill leave the dressing up to you.)

answered May 15, 2014 at 19:59

kingkode

2,21918 silver badges28 bronze badges

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

5 Comments

how can i style it so the sub menu links display below each other

thats where the absolute positioning comes into play.. 1 sec, ill update the fiddle and answer.

You'll also have to make sure that you can mouseover the siblings.

i cannot select any of the items on the sub menu because they need to display directly under the parent link

adjust your placement with css. this is a helping forum not a do-it-for-me site.. research a bit.. bit.ly/1jztlYf

Chris Lear · Accepted Answer · 2014-05-15 20:27:16Z

0

http://jsfiddle.net/73GrF/5/ is what I came up with while McMastermind was at work.

The main thing I've done is taken the margins off, floated the menu headers, and made the submenus appear on hover

#nav>li {
    float:left

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

#nav li a {
    margin:0;
}

answered May 15, 2014 at 20:27

Chris Lear

6,7601 gold badge20 silver badges29 bronze badges