HTML导航之下拉菜单方法3——JQuery下拉菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML导航之下拉菜单方法3——JQuery下拉菜单相关的知识，希望对你有一定的参考价值。
代码：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JQuery</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown { 14 width: 648px; 15 height: 40px; 16 margin: 0 auto; 17 } 18 #dropdown ul { 19 list-style-type: none; 20 } 21 #dropdown ul li { 22 position: relative; 23 float: left; 24 } 25 #dropdown a { 26 display: block; 27 min-width: 108px; 28 text-align: center; 29 text-decoration: none; 30 line-height: 40px; 31 background-color: #eeeeee; 32 color: #000000; 33 } 34 #dropdown a:hover { 35 background-color: #666666; 36 color: #ffffff; 37 } 38 #dropdown ul li ul li { 39 float: none; /*不设置左浮动也就是垂直显示*/ 40 } 41 /*以下是下拉菜单显示和隐藏的代码*/ 42 #dropdown ul li ul { /*子菜单必须设定绝对定位，否则会占据空间导致内容移动*/ 43 position: absolute; /*如果设置了left、top等属性，则父级要设置相对定位，如果不设置，则跟static的位置一样，会被父级为static或者relative顶下去，只是本身不占空间了*/ 44 display: none; 45 } 46 </style> 47 <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> 48 <script> 49 $(function(){ 50 $(‘.submenu‘).mouseover(function(){ 51 $(this).children(‘ul‘).show(); 52 }); 53 $(‘.submenu‘).mouseout(function(){ 54 $(this).children(‘ul‘).hide(); 55 }); 56 }); 57 </script> 58 </head> 59 <body> 60 <div id="dropdown"> 61 <ul> 62 <li><a href="">首 页</a></li> 63 <li class="submenu"><a href="">主菜单一</a> 64 <ul> 65 <li><a href="">子菜单一</a></li> 66 <li><a href="">子菜单二</a></li> 67 <li><a href="">子菜单三</a></li> 68 </ul> 69 </li> 70 <li class="submenu"><a href="">主菜单二</a> 71 <ul> 72 <li><a href="">子菜单一</a></li> 73 <li><a href="">子菜单二</a></li> 74 <li><a href="">子菜单三</a></li> 75 <li><a href="">子菜单四</a></li> 76 </ul> 77 </li> 78 <li><a href="">主菜单三</a></li> 79 <li><a href="">主菜单四</a></li> 80 <li><a href="">主菜单五</a></li> 81 </ul> 82 </div> 83 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 84 </body> 85 </html>
以上是关于HTML导航之下拉菜单方法3——JQuery下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章