css เมนูดรอปดาว ทำไมมันไม่ซ่อนเมนูย่อยครับ แล้วจะทำยังไงให้ซ่อนเมนูย่อย แล้วพอเมาส์ชี้เมนูหลักแล้วเมนูย่อยแสดง

ul.nav { list-style:none; width:1000px; height:45px; display:block; opacity:25px; background:#33F; padding:0; margin:auto; border-radius:10px; }
ul.nav > li > a { float:left; font-family:Tahoma, Geneva, sans-serif; font-size:16px; line-height:35px; padding:5px 50px 5px 50px; color:#FFF; text-decoration:none; }
ul.nav > li > a:hover { background:#06F; }
ul.nav > li#home > a:hover { background:#06F; border-top-left-radius:10px; border-bottom-left-radius:10px; }
ul.nav > li > ul#main { list-style:none; width:100px; height:30px; border-radius:10px; display:block; }
ul.nav > li > ul#main > li#menu > a { width:100px; height:30px; background:#06F; border-radius:10px; text-align:center; color:#FFF; text-decoration:none; font-family:Tahoma, Geneva, sans-serif; font-size:14px; line-height:40px; padding-left:20px; padding-right:20px; padding-bottom:10px; padding-top:10px; }
ul.nav > li > ul#mian > li#menu > a:hover { background:#03F; color:#0CF; }