HTML+CSS导航之下拉菜单方法1——JS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS导航之下拉菜单方法1——JS相关的知识，希望对你有一定的参考价值。
代码：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JS</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> 48 function showsubmenu (li) { 49 var submenu = li.getElementsByTagName(‘ul‘); /*获取子菜单标签，下标从0开始*/ 50 submenu[0].style.display = ‘block‘; 51 } 52 function hidesubmenu(li) { 53 var submenu = li.getElementsByTagName(‘ul‘); 54 submenu[0].style.display = ‘none‘; 55 } 56 </script> 57 </head> 58 <body> 59 <div id="dropdown"> 60 <ul> 61 <li><a href="">首 页</a></li> 62 <li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">主菜单一</a> 63 <ul> 64 <li><a href="">子菜单一</a></li> 65 <li><a href="">子菜单二</a></li> 66 <li><a href="">子菜单三</a></li> 67 </ul> 68 </li> 69 <li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">主菜单二</a> 70 <ul> 71 <li><a href="">子菜单一</a></li> 72 <li><a href="">子菜单二</a></li> 73 <li><a href="">子菜单三</a></li> 74 <li><a href="">子菜单四</a></li> 75 </ul> 76 </li> 77 <li><a href="">主菜单三</a></li> 78 <li><a href="">主菜单四</a></li> 79 <li><a href="">主菜单五</a></li> 80 </ul> 81 </div> 82 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 83 </body> 84 </html>
以上是关于HTML+CSS导航之下拉菜单方法1——JS的主要内容，如果未能解决你的问题，请参考以下文章