需要實現的效果如圖：
<!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(imgs/bg.jpg); } .wrap li { background-image: url(imgs/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> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //mouseover：鼠標經過事件 //mouseout:鼠標離開事件 //mouseenter:鼠標進入事件 //mouseleave：鼠標離開事件 var $li = $(".wrap>ul>li"); //給li注冊鼠標經過事件，讓自己的ul顯示出來 $li.mouseenter(function () { //找到所有的兒子，並且還得是ul $(this).children("ul").show(); }); $li.mouseleave(function () { $(this).children("ul").hide(); }); }); </script> </head> <body> <div class="wrap"> <ul> <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> </body> </html>
js：
$(function () { //mouseover：鼠標經過事件 //mouseout:鼠標離開事件 //mouseenter:鼠標進入事件 //mouseleave：鼠標離開事件 var $li = $(".wrap>ul>li"); //給li注冊鼠標經過事件，讓自己的ul顯示出來 $li.mouseenter(function () { //找到所有的兒子，並且還得是ul $(this).children("ul").show(); }); $li.mouseleave(function () { $(this).children("ul").hide(); }); });