如何控制鼠标移至一级导航其他项时,第一个二级导航消失。第一个二级导航是默认显示的
代码如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.menu{height: 40px;background-color: #ccc;font: 14px/40px "微软雅黑";color:#ccc;text-align: center;}
.menu ul{list-style: none;margin-left: 20px;}
.menu ul li{float: left;padding: 0 10px;position: relative;}
.menu ul li a{text-decoration: none;display: block;color:#000;}
.menu ul li a:hover{color: red;border-bottom-color: red;}
.menu ul li.dq:hover ul.active{display: block;}
.menu ul li:hover ul{display: block;}
.menu ul li:hover .active{display: none;}
.menu ul li ul.active{display: block;}
.menu ul li ul{position: absolute;width: 1000px;display: none;left: -20px;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="about.html"><span>关于我们</span><span>ABOUT US</span></a>
<ul>
<li><a href="#">我们是谁</a></li>
<li><a href="#">我们的文化</a></li>
<li><a href="#">我们的愿景</a></li>
</ul>
</li>
<li ><a href="wedo.html"><span>我们做什么</span><span>WHAT WE DO</span></a>
<ul>
<li><a href="#">我们做什么</a></li>
<li><a href="#">动态消息</a></li>
</ul>
</li>
<li ><a href="case.html"><span>我们做过什么</span><span>CASE</span></a>
<ul>
<li><a href="#">经典案例</a></li>
<li><a href="#">动态消息</a></li>
</ul>
</li>
<li ><a href="artisan.html"><span>工匠精神</span><span>ARTISAN</span></a>
<ul>
<li><a href="#">精神简介</a></li>
<li><a href="#">精神内涵</a></li>
<li><a href="#">我们的精神</a></li>
</ul>
</li>
<li ><a href="content.html"><span>联系我们</span><span>CONTENT US</span></a>
<ul>
<li><a href="#">项目联系</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">演讲邀请</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
走向流沙
幕布斯6393831