html css 二级导航,css控制二级导航

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

代码如下：

Document

*{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;}

• 关于我们ABOUT US
  • 我们是谁
  • 我们的文化
  • 我们的愿景
• 我们做什么WHAT WE DO
  • 我们做什么
  • 动态消息
• 我们做过什么CASE
  • 经典案例
  • 动态消息
• 工匠精神ARTISAN
  • 精神简介
  • 精神内涵
  • 我们的精神
• 联系我们CONTENT US
  • 项目联系
  • 加入我们
  • 演讲邀请