css控制二级导航

如何控制鼠标移至一级导航其他项时,第一个二级导航消失。第一个二级导航是默认显示的

代码如下:

<!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>

倾昀
浏览 1564回答 2
2回答

走向流沙

js几句话就写完了。。哪种方便用哪种

幕布斯6393831

为毛你写了那么多CSS  目测是优先级的问题
打开App,查看更多内容
随时随地看视频慕课网APP