jQuery实现下拉菜单功能实例代码

来源：纷纭教育
这篇文章主要介绍了jQuery实现下拉菜单功能实例代码的相关资料,需要的朋友可以参考下。
说一百句，不如我给大家贴张效果图，效果图请看下面：
代码如下：
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 ul {
 list-style: none;
 }
 .wrap {
 width: 330px;
 height: 30px;
 margin: 100px auto 0;
 padding-left: 10px;
 background-color: skyblue;
 }
 .wrap li {
 background-color: skyblue;
 }
 .wrap > ul > li {
 float: left;
 margin-right: 10px;
 position: relative;
 }
 .wrap a {
 display: block;
 height: 30px;
 width: 100px;
 text-decoration: none;
 color: #000;
 line-height: 30px;
 text-align: center;
 }
 .wrap li ul {
 position: absolute;
 top: 30px;
 display: none;
 }
 </style>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
 <script>
 $(function () {
 //获取所有li，添加移入事件
 $(".wrap>ul>li").mouseenter(function () {
 //设置内部的子元素ul slideDown
 $(this).children("ul").stop().slideDown(600);
 });
 //移出li时，让内部子元素slideUp
 $(".wrap>ul>li").mouseleave(function () {
 $(this).children("ul").stop().slideUp(600);
 });
 //如果当前运动没有完毕，又添加了新的动画，这时新的动画需要等待当前动画执行完毕才会开始
 //如果持续添加。一定会造成动画的积累，这种情况我们称为动画队列
 });
 </script>
</head>
<body>
<div>
 <ul>
 <li>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单1</a>
 <ul>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单11</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单12</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单13</a></li>
 </ul>
 </li>
 <li>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单2</a>
 <ul>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单21</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单22</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单23</a></li>
 </ul>
 </li>
 <li>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单3</a>
 <ul>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单31</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单32</a></li>
 <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单33</a></li>
 </ul>
 </li>
 </ul>
</div>
</body>
</html>