效果：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="http://www.51rgb.com/js/jquery.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 $("#list").hide(); 10 //hover(mouseover,mouseout) 11 $("#menu").hover(function () { 12 $("#list").slideDown();//slieDown():慢慢出现，还有slideUp，注意大小写 13 }, function () { 14 $("#list").hide(); 15 }) 16 // 鼠标移动到list的div上的时候list div不会被隐藏 17 $("#list").hover(function () { 18 $("#list").show(); 19 }, function () { 20 $("#list").hide(); 21 }) 22 }); 23 // $(function () { 24 // $(".menu_right").mouseover(function () { 25 // $(".menu_right img").attr("src", "guowuche_cheng.jpg"); 26 // $(".menu_right span").addClass("guowuche_sp"); 27 // $(".menu_right ").addClass("guowuche_bg"); 28 // //$(".menu_right>div").addClass("guowuchecontent"); 29 // $(".menu_right>div").slideDown(); 30 // }) 31 // $(".menu_right").mouseout(function () { 32 // $(".menu_right img").attr("src", "guowuche_hui.jpg"); 33 // $(".menu_right span").removeClass("guowuche_sp"); 34 // $(".menu_right ").removeClass("guowuche_bg"); 35 // // $(".menu_right>div").removeClass("guowuchecontent"); 36 // }) 37 // $("body").mouseover(function (e) { 38 // if ($(e.target).closest(".menu_right").length === 0) { 39 // $(".menu_right>div").slideUp(); 40 // } 41 // }) 42 </script> 43 </head> 44 <body> 45 <div id="menu" style=" 300px; height: 100px; border: 1px solid red;"></div> 46 <div id="list" style=" 300px; height: 300px; background-color: green;"></div> 47 </body> 48 </html>