CSSは、ドロップダウンメニューの問題

Question

私はドロップダウンでのCSSメニューを構築しようとしていますが、何かのように：

MENU1 MENU2 MENU3 アイテム1アイテム1アイテム1 アイテム2アイテム2アイテム2 ITEM3 ITEM3 ITEM4

メニューバーがありますメニュードロップダウンのためにさらにliとサブULを持つUL。私はCSSを書いており、ドロップダウンはメニューホバー上で発生しますが、ドロップダウンリストを調べようとするとすぐにメニューが消えます。明らかに、私はメニューホバー上の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は、メニューの様々な例があります。

は、ここに私のCSSです。
テンプレートとして使用できるものがあります。

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>