html下拉展开代码,HTML下拉导航代码样式，可演示

html里面有一个下拉导航，很多时候都有用到，今天分享一个下拉导航的样式代码，当然，下拉导航的样式有好几种实现方式，废话不多说，直接上代码：html>

下拉导航

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;

}

• menu1
  • menu11
  • menu12
  • menu13
• menu2
  • menu21
  • menu22
  • menu23
• menu3
  • menu31
  • menu32
  • menu33

My Page

点击测试下拉导航吧!!!

总结要点：HTML下拉要注意层级结构，其次是要对主导航的无序列表ul设置绝对定位，不过，不用定位也能实现。