1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>submenu</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 ul { 16 list-style: none; 17 } 18 19 li ul { 20 display: none; 21 } 22 23 a { 24 display: block; 25 width: 120px; 26 height: 30px; 27 line-height: 30px; 28 text-align: center; 29 text-decoration: none; 30 color: black; 31 background-color: orange; 32 overflow: hidden; 33 } 34 35 a:hover { 36 background-color: aliceblue; 37 } 38 </style> 39 <script src="js/jquery-1.11.3.min.js"></script> 40 <script> 41 $(function() { 42 $("ul>li").hover(function() { 43 // over 44 $(this).children("ul").show(); 45 46 }, function() { 47 // out 48 $(this).children("ul").hide(); 49 }); 50 }) 51 </script> 52 </head> 53 54 <body> 55 <ul> 56 <li> 57 <a href="javascript:void(0);">一级菜单1</a> 58 <ul> 59 <li> 60 <a href="javascript:void(0);">二级菜单1</a> 61 </li> 62 <li> 63 <a href="javascript:void(0);">二级菜单1</a> 64 </li> 65 <li> 66 <a href="javascript:void(0);">二级菜单1</a> 67 </li> 68 </ul> 69 </li> 70 <li> 71 <a href="javascript:void(0);">一级菜单2</a> 72 <ul> 73 <li> 74 <a href="javascript:void(0);">二级菜单2</a> 75 </li> 76 <li> 77 <a href="javascript:void(0);">二级菜单2</a> 78 </li> 79 <li> 80 <a href="javascript:void(0);">二级菜单2</a> 81 </li> 82 </ul> 83 </li> 84 <li> 85 <a href="javascript:void(0);">一级菜单3</a> 86 <ul> 87 <li> 88 <a href="javascript:void(0);">二级菜单3</a> 89 </li> 90 <li> 91 <a href="javascript:void(0);">二级菜单3</a> 92 </li> 93 <li> 94 <a href="javascript:void(0);">二级菜单3</a> 95 </li> 96 </ul> 97 </li> 98 </ul> 99 </body> 100 101 </html>