一. 简单的说就是列表里面再嵌套一个列表：
二. 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;
}
4231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
