<!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-image: url(img/bg.jpg); } .wrap li { background-image: url(img/libg.jpg); } .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> </head> <body> <div class=“wrap”> <ul id=“menu”> <li> <a href=“javascript:void(0);”>一级菜单1</a> <ul class=“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> <script src=“lib/jquery-1.12.4.min.js”></script> <script> // 给最外层的 li 标签添加事件 var $lis = $(“.wrap #menu > li”) // // 鼠标进入，让内部的子级的 ul 进行显示 // $lis.mouseenter(function () { // $(this).children(“ul”).show() // }) // // 鼠标离开，让内部的子级的 ul 进行隐藏 // $lis.mouseleave(function () { // $(this).children(“ul”).hide() // }) // 升级，让它进行运动的显示和隐藏 // 鼠标进入，让内部的子级的 ul 进行显示 $lis.mouseenter(function () { // 动画开始之前，清空动画排队 $(this).children(“ul”).stop(true).slideDown(500) }) // 鼠标离开，让内部的子级的 ul 进行隐藏 $lis.mouseleave(function () { $(this).children(“ul”).stop(true).slideUp(500) }) </script> </body> </html>
