通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有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>