CSS вопроса Выпадающего Меню

Question

Я пытаюсь создать меню CSS с выпадающими, что-то вроде:

MENU1 menu2 menu3 Элемент1 Элемент1 Элемент1 Элемент2 Элемент2 Элемент2 Item3 Item3 Item4

бара меню является UL с дополнительными ли и суб UL для выпадающих меню. Я написал CSS, и выпадающее меню происходит при наведении курсора меню, но как только я попытаюсь просмотреть раскрывающийся список, меню исчезает. Очевидно, потому что я установил свойство css hover в меню hover. Я пытаюсь использовать только CSS. Можете ли вы направить меня, что мне делать, чтобы сохранить раскрывающийся список меню, пока я просматриваю выпадающие элементы?

Вот мой 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 имеет множество примеров меню.
Возможно, вы нашли что-то, что можно использовать в качестве шаблона.

Answer 2

CSS

<style> 
#navMenu{ 
margin:0; 
padding:0; 
} 
#navMenu ul{ 
margin:0; 
padding:0; 
line-height:30px; 
} 
#navMenu li{ 
margin:0; 
padding:0; 
list-style:none; 
float:left; 
position:relative; 
background:#3A4956; 
} 
#navMenu ul li a{ 
text-align:center; 
color:black; 
text-decoration:none; 
font-family:"Comic Sans MS"; 
height:30px; 
width:150px; 
display:block; 
border-bottom:1px black solid; 
} 
#navMenu ul li a:hover{ 
color:white; 
} 
#navMenu ul ul{ 
position:absolute; 
visibility:hidden; 
} 
#navMenu ul li:hover ul{ 
visibility:visible 
} 
#wrapper1{ 
border-radius:8px 0 0 0; 
border-right:1px black solid 

} 
#wrapper4{ 
border-radius:0 8px 0 0; 
} 
</style> 

HTML

<div id="wrapper"> 
<div id="navMenu"> 
<ul style="height: 30px; width: 308px"> 
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a> 
<ul> 
<li id="wrapper3"><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 
</li> 
<li id="wrapper4"><a style="color:black" href="#">Products</a> 
<ul> 
<li id="wrapper3"><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</div>