導(dǎo)航條是一個(gè)網(wǎng)站的基礎(chǔ)，美觀易用的導(dǎo)航條對(duì)于任何網(wǎng)站都是非常重要的。按照傳統(tǒng)的方法，導(dǎo)航條是由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來(lái)定位任何非表格的頁(yè)面內(nèi)容，所以很多人都用結(jié)構(gòu)化的XHTML標(biāo)記和CSS格式來(lái)創(chuàng)建導(dǎo)航條。下面先來(lái)看一下最簡(jiǎn)單的css導(dǎo)航條是怎么實(shí)現(xiàn)的：

首先,我們來(lái)給這個(gè)下拉菜單寫一個(gè)HTML的代碼.先創(chuàng)建一個(gè)div來(lái)做為容器,然后把這個(gè)導(dǎo)航菜單放到這個(gè)容器里.正如下面的代碼,我們用無(wú)序列表來(lái)創(chuàng)建這個(gè)導(dǎo)航菜單.在這個(gè)導(dǎo)航菜單中Portfolio項(xiàng)下有一個(gè)子菜單,用粗體表示出來(lái),別忘了關(guān)閉</li>。

<div id="nav"> 
<ul> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About Me</a></li> 
<li><a href="#">Portfolio</a> 
<ul> 
<li><a href="#">Web</a></li> 
<li><a href="#">Print</a></li> 
<li><a href="#">Photos</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Me</a></li> 
</ul> 
</div> 

*{ margin:0px; padding: 0px; } 
#nav { 
font-family: arial, sans-serif; 
position: relative; 
width: 390px; 
height:56px; 
font-size:14px; 
color:#999; 
margin: 0 auto; 
} 
#nav ul { 
list-style-type: none; 
} 

#nav ul li { 
float: left 
position: relative; 
} 

#nav ul li a { 
text-align: center; 
border-right:1px solid #e9e9e9; 
padding:20px; 
display:block; 
text-decoration:none; 
color:#999; 
} 

#nav ul li ul { 
display: none 
} 
#nav ul li:hover ul { 
display: block; 
position: absolute; 
} 

#nav ul li:hover ul li a { 
display:block; 
background:#12aeef; 
color:#ffffff; 
width: 110px; 
text-align: center; 
border-bottom: 1px solid #f2f2f2; 
border-right: none; 
} 
#nav ul li:hover ul li a:hover { 
background:#6dc7ec; 
color:#fff; 
} 

*{ margin:0px; padding: 0px; } 
#nav { 
font-family: arial, sans-serif; 
position: relative; 
width: 390px; 
height:56px; 
font-size:14px; 
color:#999; 
margin: 0 auto; 
} 
#nav ul { 
list-style-type: none; 
} 
#nav ul li { 
float: left; 
position: relative; 
} 
#nav ul li a { 
text-align: center; 
border-right:1px solid #e9e9e9; 
padding:20px; 
display:block; 
text-decoration:none; 
color:#999; 
} 
#nav ul li ul { 
display: none 
} 
#nav ul li:hover ul { 
display: block; 
position: absolute; 
} 
#nav ul li:hover ul li a { 
display:block; 
background:#12aeef; 
color:#ffffff; 
width: 110px; 
text-align: center; 
border-bottom: 1px solid #f2f2f2; 
border-right: none; 
} 
#nav ul li:hover ul li a:hover { 
background:#6dc7ec; 
color:#fff; 
} 

查看在線運(yùn)行效果

css導(dǎo)航條素材下載

點(diǎn)此下載

純CSS實(shí)現(xiàn)的彩色導(dǎo)航菜單

點(diǎn)此下載

左側(cè)導(dǎo)航布局CSS網(wǎng)頁(yè)模板

點(diǎn)此下載

CSS中英文雙語(yǔ)導(dǎo)航菜單

點(diǎn)此下載

CSS水平下拉菜單

點(diǎn)此下載

div css下拉導(dǎo)航菜單分類代碼

點(diǎn)此下載

五款漂亮的CSS橫向下拉菜單導(dǎo)航條

點(diǎn)此下載