1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 ul { 12 list-style: none; 13 } 14 15 .wrap { 16 width: 330px; 17 height: 30px; 18 margin: 100px auto 0; 19 background-image: url(imgs/bg.jpg); 20 padding-left: 10px; 21 } 22 23 .wrap li { 24 float: left; 25 width: 100px; 26 height: 30px; 27 margin-right: 10px; 28 position: relative; 29 } 30 31 .wrap a { 32 color: black; 33 text-decoration: none; 34 display: block; 35 width: 100px; 36 height: 30px; 37 text-align: center; 38 line-height: 30px; 39 background-image: url(imgs/libg.jpg); 40 } 41 42 .wrap li ul { 43 position: absolute; 44 display: none; 45 } 46 </style> 47 <script src="jquery-1.11.1.min.js"></script> 48 <script> 49 $(document).ready(function () { 50 // mouseenter事件 是 鼠标经过时触发的事件 51 // 第一种 52 /*$(".wrap li").mouseenter(function () { 53 $(this).children("ul").show(); 54 }); 55 56 $(".wrap li").mouseleave(function () { 57 $(this).children("ul").hide(); 58 });*/ 59 // 第二种 60 /*$(".wrap li").hover(function () { 61 //alert("1"); 62 $(this).children("ul").show(); 63 }, function () { 64 $(this).children("ul").hide(); 65 });*/ 66 // 第三种 67 /*$(".wrap li").hover(function () { 68 /!*alert("1");*!/ 69 var $this = $(this).children("ul"); 70 var isShow = $this.css("display"); 71 if(isShow === "block") { 72 $this.hide(); 73 } else { 74 $this.show(); 75 } 76 });*/ 77 // 第四种 78 $(".wrap li").hover(function () { 79 $(this).children("ul").slideToggle(); 80 }); 81 }); 82 </script> 83 </head> 84 <body> 85 <div class="wrap"> 86 <ul> 87 <li> 88 <a href="#">一级菜单1</a> 89 <ul> 90 <li><a href="#">二级菜单1</a></li> 91 <li><a href="#">二级菜单2</a></li> 92 <li><a href="#">二级菜单3</a></li> 93 </ul> 94 </li> 95 <li> 96 <a href="#">一级菜单1</a> 97 <ul> 98 <li><a href="#">二级菜单1</a></li> 99 <li><a href="#">二级菜单2</a></li> 100 <li><a href="#">二级菜单3</a></li> 101 </ul> 102 </li><li> 103 <a href="#">一级菜单1</a> 104 <ul> 105 <li><a href="#">二级菜单1</a></li> 106 <li><a href="#">二级菜单2</a></li> 107 <li><a href="#">二级菜单3</a></li> 108 </ul> 109 </li> 110 </ul> 111 </div> 112 </body> 113 </html>