用CSS開發(fā)時(shí)髦的導(dǎo)航欄第二篇

更新時(shí)間：2008年05月26日 19:10:43 作者：

我能夠使用CSS和列表創(chuàng)造有子菜單的導(dǎo)航欄嗎？有時(shí)候我們需要超過一級的導(dǎo)航欄 – 可是在CSS里面用樣式化的列表能夠創(chuàng)建多級導(dǎo)航欄嗎？

解決方案

在一個(gè)導(dǎo)航系統(tǒng)中顯示子菜單最好的辦法是在一個(gè)列表中創(chuàng)建子列表。這樣標(biāo)記的兩級導(dǎo)航欄很容易被理解 – 哪怕瀏覽器不支持CSS。

為了產(chǎn)生多級導(dǎo)航欄，我們創(chuàng)建一個(gè)嵌套的列表，為這些新的列表項(xiàng)樣式化顏色、邊界和鏈接屬性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists as navigation</title>

content="text/html; charset=utf-8" />

</head>

<body>

<ul>

<li><a href="#">Recipes</a>

<ul>

<li><a href="#">Starters</a></li>

<li><a href="#">Main Courses</a></li>

<li><a href="#">Desserts</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

</div>

</body>

</html>

#navigation {

width: 200px;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

#navigation li a:hover {

background-color: #711515;

color: #FFFFFF;

}

#navigation ul ul {

margin-left: 12px;

}

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin:0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}

增加這些以后的顯示效果如圖4。

圖4. 包含子菜單的導(dǎo)航欄

討論

嵌套列表是用來描述我們正在做的導(dǎo)航欄系統(tǒng)的好辦法。第一個(gè)列表包含站點(diǎn)的主要部分，在Recipes下面的子列表顯示了Recipes范圍之內(nèi)的子部分。即使沒有任何CSS樣式，列表的結(jié)構(gòu)依然清晰且容易理解，就象你在圖5看到的一樣。