html里面有一个下拉导航,很多时候都有用到,今天分享一个下拉导航的样式代码,当然,下拉导航的样式有好几种实现方式,废话不多说,直接上代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>下拉导航</title> <style> body { width: 95%; margin: 0 auto; background:red; } #header { height: 50px; width: 95%; } #nav { position: absolute; /*菜单绝对定位*/ } #nav > li { list-style-type: none; /*去掉第一层li里面的符号*/ float: left; /*将第一层的li横向摆放*/ width: 100px; /*设置宽度*/ font-size: 30px; /*字体大小*/ background-color: #16b6fc; /*背景颜色*/ color: white; /*字体颜色*/ } #nav li > ul > li { list-style-type: none; /*去掉第二层li里面的符号*/ font-size: 15px; /*字体大小*/ padding-top: 8px; /*设置上间距*/ padding-bottom: 8px; /*设置下间距*/ } #nav li ul { margin-left: 0px; /*将第二层的ul都移到最左边*/ padding-left: 0px; /*将第二层的ul都移到最左边*/ display: none; /*隐藏ul内容,隐藏子菜单内容*/ } #nav > li:hover ul { /*鼠标放在主菜单上,子菜单会显示出来*/ display: block; } #nav > li > ul > li:hover { /*鼠标放在子菜单上,了菜单的背景和字体颜色会改变*/ background-color: white; color: black; } #content { clear: both; padding-left: 40px; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="header"> <ul id="nav"> <li>menu1 <ul> <li>menu11</li> <li>menu12</li> <li>menu13</li> </ul> </li> <li>menu2 <ul> <li>menu21</li> <li>menu22</li> <li>menu23</li> </ul> </li> <li>menu3 <ul> <li>menu31</li> <li>menu32</li> <li>menu33</li> </ul> </li> </ul> </div> <div id="content"> <h1>My Page</h1> <p>点击测试下拉导航吧!!!</p> </div> </div> </form> </body> </html>
总结要点:HTML下拉要注意层级结构,其次是要对主导航的无序列表ul设置绝对定位,不过,不用定位也能实现。