一. 简单的说就是列表里面再嵌套一个列表：

• HTML教程
  • 辉辉傻逼
  • 辉辉傻逼
  • 辉辉傻逼

二. css样式设置

应由外向内设置样式。

先介绍几种样式：

display:block:表示元素显示为行级元素，独占一行。可设置元素的宽度和高度。

display:inline-block:表示元素显示为内联行级元素，既可并排显示，也可设置元素的宽度和高度。

font:14px/20px arial;表示字体大小为14px,行高为20px,字体为arial;相当于下面三行代码：

font-size:14px;

line-height:20px;

font-family:arial;

其中，将line-height设置为与容器的高度相等可实现元素垂直居中，text-align只能实现水平居中。

要想让标签ul里面的标签li里面的元素并排显示，必须将最外层li样式设置为display:inline-block;否则一行只能显示一个li元素。并且标签li里面的超链接样式也要设置为display:inline-block;才能进行相应的样式设置，否则样式设置受到限制。

#nav li{

display:inline-block;

}

#nav li a{

display:inline-block;

padding:0 20px;

color:#FFF;

text-decoration:none;

font:17px/60px arial;/*17px代表字体大小，60px代表行高，arial代表字体;*/

}

将li标签里面的嵌套列表ul的定位设置为绝对定位position:absolute;表示相对于父级元素定位，要想让二级列表里面的内容隐藏起来，则将ul样式设置为display:none;.

#nav li ul {

position:absolute;

display:none;

}

这点特别关键，决定了二级菜单的下拉效果垂直显示，否则下拉后只能并排显示。

#nav li ul li {

display: block;

}

接下来可将二级菜单中的超链接a的背景颜色设置为与一级菜单中的一样，让看起来像个整体。

#nav li ul li a {

background:#00A2CA;

}

这点也非常重要，决定了二级列表能否显示。即当鼠标移到一级菜单上时，二级菜单能否下拉。

#nav li:hover ul{

display:block;

}

三.整体代码

body{

margin:0;

padding:0;

text-align:center;

}

ul, li{

margin:0;

padding:0;

font-style: normal;

list-style:none;

}

#nav{

width:100%;

height:60px;

background:#00A2CA;

margin:0 auto;

overflow:hidden;

}

#nav li{

display:inline-block;

}

#nav li a{

display:inline-block;

padding:0 20px;

color:#FFF;

text-decoration:none;

font:17px/60px arial;/*17px代表字体大小，60px代表行高，arial代表字体;*/

}

#nav li a:hover{

background:#0095BB;

}

#nav li ul {

position:absolute;

display:none;

}

#nav li ul li {

display: block;

}

#nav li ul li a {

background:#00A2CA;

}

#nav li:hover ul{

display:block;

}

• 首页
• HTML教程
  • 辉辉傻逼
  • 辉辉傻逼
  • 辉辉傻逼
• CSS基础
  • 辉辉最帅
  • 辉辉最帅
  • 辉辉最帅
  • 辉辉最帅
• CSS开发工具
  • heheheheheH
  • heheheheheH
  • heheheheheH
  • heheheheheH
  • heheheheheH
• CSS特效
• CSS问题