1.效果
2.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标划入画出事件</title> <script src="jquery.js"></script> <style> * { padding:0px; margin:0px; } li { list-style: none; } a { text-decoration: none; } .show{ margin:0 auto; 1200px; } .show .nav { float:left; margin-left:100px; background-color: pink; 100px; text-align: center; } .download { margin-top:10px; } .download li { margin-top:5px; } .download { display: none; } </style> </head> <body> <div class="show"> <ul> <li class="nav"><a href="#">首页</a> <ul class="download"> <li>11111111</li> <li>22222222</li> <li>33333333</li> </ul> </li> <li class="nav"><a href="#">第一</a> <ul class="download"> <li>11111111</li> <li>22222222</li> <li>33333333</li> </ul> </li> <li class="nav"><a href="#">第二</a> <ul class="download"> <li>11111111</li> <li>22222222</li> <li>33333333</li> </ul> </li> </ul> </div> </body> </html> <script> $(document).ready(function(){ $(".nav").mouseover(function(){ $(this).children(".download").show(); }); $(".nav").mouseout(function(){ $(this).children(".download").hide(); }); }); </script>