通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有hover时，一种是鼠标hover时。
主菜单hover时，显示子菜单；主菜单没有hover时，不显示子菜单
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>下拉菜单</title> <link type="text/css" rel="stylesheet" href="./css/reset.css" /> <style> /* no hover 状态 */ .xiala_menu{ width:30%; /* 调整宽度 */ margin:0 auto; text-align:center; } .xiala_menu li{ width:80px; float:left; background:#e5e5e5; margin-right:1px; } .xiala_menu li ul{ display:none; } /* hover 状态 */ .xiala_menu li:hover ul{ display:block; } .xiala_menu li:hover ul li{ background:#ccc; margin:1px 0; cursor:pointer; } .xiala_menu li:hover ul li:hover{ color:red; background:#bdbdbd; } </style> </head> <body> <div class="xiala_wrap"> <ul class="xiala_menu clearfix"> <li> 菜单1 <ul> <li> 菜单11 </li> <li> 菜单11 </li> <li> 菜单11 </li> <li> 菜单11 </li> </ul> </li> </ul> </div> </body> </html>