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