鼠标经过的样式对三级菜单不起作用
.top-nav li a:hover{
background-color: #900;
color:white;
}定义了鼠标经过的样式，可是对三级菜单不起作用，鼠标经过三级菜单时二三级菜单自动隐藏了，不会悬停。
完整代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
/* behavior:url(csshover.htc); */
/*IE6不支持hover的解决方法*/
}
.top-nav{font-size:12px;font-weight: bold;list-style: none;/* border-bottom: 8px solid #dc4e1b; */
overflow: auto;}
.top-nav li{float: left;margin: 1px;}
.top-nav li a{
line-height: 20px;
text-decoration: none;
background-color: #ddd;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li ul{display: none;list-style: none;
padding: 0;
/*让二级菜单与一级菜单左端对齐*/
position: relative;
}
.top-nav li:hover ul{
display: block;
width:80px;
/*定义宽度让二级菜单纵向显示*/
}
.top-nav li a:hover{
background-color: #900;
color:white;
}
.top-nav li:hover ul li ul{display: none;}
.top-nav li ul li:hover ul{display: block;
top:0px;left:85px;position: absolute;}
</style>
</head>
<body>
<ul>
<li><a href="www.imooc.com">首页</a></li>
<li><a href="www.imooc.com">课程大厅</a></li>
<li><a href="www.imooc.com">学习中心+</a>
<ul>
<li><a href="www.imooc.com">前端课程+</a>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a></li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="www.imooc.com">关于我们</a></li>
</ul>
</body>
</html>
