标签：
先上测试地址http://4.lanjianwc.sinaapp.com/
<!DOCTYPE html> <head> <meta charset="utf-8"> <script type="text/javascript"> </script> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> body{ margin: 0px; font-family: "Microsoft YaHei"; background-color: #323232; } .nav{ background-color: rgb(97,197,258); height: 56px; border-bottom: 4px solid #2d93d4; transition:height 0.4s; -moz-transition:height 0.4s; -webkit-transition:height 0.4s; -o-transition:height 0.4s; /*菜单展开动画*/ } .nav ul{ list-style: none; margin: 0px; float: left; } .nav li{ padding-left: 20px; padding-top: 20px; text-decoration: none; } .nav li a{ text-decoration: none; color: #fff; } .nav:hover{ height: 260px; background-color: #2d93d4; } .close{ display: none; } .close li{ font-size: 14px; } .open{ display: inherit; } .open li{ font-size: 14px; } </style> </head> <body> <div class="nav"> <ul> <li><a href="1">官网首页</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </div> </ul> <ul> <li><a href="1">产品介绍</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="6">联系我们</a></li> </div> </ul> <ul> <li><a href="1">服务介绍</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="6">联系我们</a></li> </div> </ul> <ul> <li><a href="1">技术支持</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </div> </ul> <ul> <li><a href="1">立即购买</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> </div> </ul> <ul> <li><a href="1">联系我们</a></li> <div class="open"> <li><a href="2">产品介绍</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </div> </ul> </div> <script type="text/javascript"> $(".open").hide(); // 将子菜单隐藏 $(".nav").mouseover(function(){ $(".open").show(300); }) // 鼠标经过显示 $(".nav").mouseleave(function(){ $(".open").hide(300); }) // 鼠标移出移除 </script> </body>
仅用了显示show()和隐藏hide()两个方法，当鼠标移动到菜单栏时显示子菜单，移出时再把它隐藏
标签：
原文地址：http://www.cnblogs.com/lanjianwc/p/4596501.html
