Question

I am trying to build a CSS menu with dropdowns,something like:

MENU1 MENU2 MENU3
Item1 Item1 Item1
Item2 Item2 Item2
Item3 Item3
Item4

The Menus bar is a UL with further li and sub ULs for menu dropdowns. I have wrote the CSS and the dropdown occurs on Menu hover but as soon as I try to go through the dropdown list the menu disappears. Obviously because I have set the css hover property on Menu hover. I am trying to use only CSS. Can you direct me what should I do to keep the menu dropdown visible while I go through the dropdown items?

Here is my css:

#menuNav{width:100%; position:relative; height:28px; list-style:none;}
#menuNav li{float:left; position:relative;}  //MENU1, MENU2, MENU3
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL
#menuNav a{display:block;}
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover

Answer 1

CSSPlay has a variety of menu examples.
You might find something you can use as a template.