CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作
网页下拉导航栏的制作很简单，只需要运用好CSS中伪选择器。
首先说明几个简单的伪选择器（比较常用的）：
link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候
通常导航栏是用列表标签制作，通过伪选择器的控制，实现其下拉的效果。
下面写一段简单导航栏：
<div><!--导航栏-->
<div class="navbar">
<ul class="link">
<li class="one_hopmepage"><a href="#">父标签零</a>
<ul>
<li><a href="#">子标签一</a></li></ul>
</li>
<li><a href="#">父标题一</a>
<ul class="link">
<li><a href="#">子标题一</a></li>
<li><a href="#">子标题二</a></li>
<li><a href="#">子标题二</a></li>
</ul>
</li>
<li><a href="#">父标题二</a>
<ul class="link">
<li><a href="#">子标题一</a></li>
<li><a href="#">子标题二</a></li>
<li><a href="#">子标题二</a></li>
</ul>
<li><a href="#">父标题三</a>
<ul>
<li><a href="#">子标题一</a>
<li><a href="#">子标题二</a>
</ul>
</li>
</ul>
</div>
</div><!--导航栏-->
CSS代码：
.navbar{
height: 120px;
width: 100%;
text-align:left;
font-family: arial, sans-serif;
background:url(navbar.png) no-repeat;
padding-top:10px;
}
/***********************************/
/*一级列表属性*/
.navbar ul{
float:left;
margin-top:0px;
padding:0px;/*Ul默认有内边距*/
}
.navbar ul li{
float:left;
width:91px;
padding-left:0px;
padding-top:0px;
}
.navbar ul li a{
text-align: center;
/*border-right:1px solid #e9e9e9; */
padding:10px;
display:block;
text-decoration:none;
color:#999;
}
/***************************************/
.link a:hover{
color: #F63;
}
/***************************************/
/*二级列表属性*/
.navbar ul li ul {
display: none;/**/
}
.navbar ul li:hover ul {
display: block;
position: absolute;
background-color:#CCC;
}
/*二级列表的样式*/
.navbar ul li ul{
width:95px;
}
.one_hopmepage{
width:80px;
}
.navbar ul li ul li{
width:119px;
text-align:center;
padding-left:2px;
float:left;
}
/**********************************/
显示效果如下：
1.鼠标未在标题栏时
2.鼠标放在标题上时：
这里，我只是做了简单写了一个，界面不是很好看，你自己可以制作出很精美的导航栏，其中有什么不足，请大家指出。