網頁下拉導航欄的制作
網頁下拉導航欄的制作很簡單，只需要運用好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.鼠標放在標題上時：
這里，我只是做了簡單寫了一個，界面不是很好看，你自己可以制作出很精美的導航欄，其中有什么不足，請大家指出。