CSS drop-down menu problem

advertisements

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


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