如何在水平CSS菜单上显示子菜单

Question

I have this CSS Menu:

http://jsfiddle.net/73GrF/

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

#nav li a:hover

Answer 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.)

Answer 2

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