ผมยากได้เมื่อเอาเมาส์ไปชี้ ที่เมนูหลักแล้วจะมีเมนูย่อยๆๆ ลงมา ครับเหมือนรูปอ่ะครับ ไม่ทราบต้องเขียนไงครับ

<style>
#menu{
	margin:0;
	padding:0;
	cursor:pointer;
	background:#0033CC;
	width:200px;
	display:block;
}
#menu p{
	margin:0;
	padding:1px 0 1px 10px;
	color:#FFFFFF;
	font-weight:bold;
}
#submenu{
	visibility:hidden;
	position:absolute;
}
#submenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	background:#00CCFF;
	width:200px;

}
#submenu ul li{
	margin:0;
	padding:1px 0 1px 10px;
	display:block;
	border-bottom:1px solid #CCFFFF;
}
#submenu ul li a{
	text-decoration:none
	color:#000000;
}
#submenu ul li a:hover{
text-decoration:underline;
}
</style>
<script>
function showSubmenu(){
	document.getElementById('submenu').style.visibility="visible";
}
function hideSubmenu(){
	document.getElementById('submenu').style.visibility="hidden";
}
</script>

<div id="menu"  onmouseout="hideSubmenu()" onmouseover="showSubmenu()"><p>show submenu</p></div>
<div id="submenu" onmouseout="hideSubmenu()" onmouseover="showSubmenu()">
	<ul>
		<li><a href="">list1</a></li>
		<li><a href="">list2</a></li>
		<li><a href="">lis3</a></li>
	</ul>
</div>
text text text text text