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.鼠标放在标题上时：

这里，我只是做了简单写了一个，界面不是很好看，你自己可以制作出很精美的导航栏，其中有什么不足，请大家指出。