基本效果是这样的~~
<!DOCTYPE html> <html> <head lang="en"> <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="https://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);" >一级菜单1</a> <ul> <li><a href="javascript:void(0);" >二级菜单11</a></li> <li><a href="javascript:void(0);" >二级菜单12</a></li> <li><a href="javascript:void(0);" >二级菜单13</a></li> </ul> </li> <li> <a href="javascript:void(0);" >一级菜单2</a> <ul> <li><a href="javascript:void(0);" >二级菜单21</a></li> <li><a href="javascript:void(0);" >二级菜单22</a></li> <li><a href="javascript:void(0);" >二级菜单23</a></li> </ul> </li> <li> <a href="javascript:void(0);" >一级菜单3</a> <ul> <li><a href="javascript:void(0);" >二级菜单31</a></li> <li><a href="javascript:void(0);" >二级菜单32</a></li> <li><a href="javascript:void(0);" >二级菜单33</a></li> </ul> </li> </ul> </div> </body> </html>
以上所述是小编给大家介绍的jQuery实现下拉菜单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: