一. 简单的说就是列表里面再嵌套一个列表：
<ul id="nav">
<li><a href="#">HTML教程</a>
<ul>
<li><a href="#">辉辉傻逼 </a></li>
<li><a href="#">辉辉傻逼 </a></li>
<li><a href="#">辉辉傻逼 </a></li>
</ul>
</li>
</ul>
二. 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;
}
三.整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.imooc.com">首页</a></li>
<li><a href="#">HTML教程</a>
<ul>
<li><a href="#">辉辉傻逼 </a></li>
<li><a href="#">辉辉傻逼 </a></li>
<li><a href="#">辉辉傻逼 </a></li>
</ul>
</li>
<li><a href="#">CSS基础</a>
<ul>
<li><a href="#">辉辉最帅</a></li>
<li><a href="#">辉辉最帅</a></li>
<li><a href="#">辉辉最帅</a></li>
<li><a href="#">辉辉最帅</a></li>
</ul>
</li>
<li><a href="#">CSS开发工具</a>
<ul>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
</ul>
</li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS问题</a></li>
</ul>
</body>
</html>
网友评论