解決方案

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

為了產(chǎn)生多級(jí)導(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">

html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

head>

title>Lists as navigation/title>

meta http-equiv="content-type"

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

link rel="stylesheet" type="text/css" href="listnav_sub.css" />

/head>

body>

div id="navigation">

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)航欄

討論

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

圖5：沒(méi)有使用樣式，包含子菜單的導(dǎo)航欄

下面是我們用來(lái)在主要項(xiàng)目的li元素里面標(biāo)記這個(gè)簡(jiǎn)單的嵌套列表的HTML代碼：

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>

用HTML，如果簡(jiǎn)單的使用本文前面的CSS，不做任何修改的話，導(dǎo)航菜單的顯示將如圖6。由于li元素繼承主菜單的樣式，子列表將呈現(xiàn)出主導(dǎo)航欄一樣的樣式。

圖6：采用默認(rèn)樣式表子菜單導(dǎo)航欄

為了讓嵌套的列表呈現(xiàn)出它是一個(gè)子菜單而不是主導(dǎo)航欄一部分的效果，讓我們?cè)黾右粋€(gè)樣式規(guī)則：

#navigation ul ul {

margin-left: 12px;

}

這個(gè)規(guī)則將縮進(jìn)嵌套列表，讓它在主菜單的右邊界對(duì)齊，象圖7顯示的這樣：

圖7：帶有縮進(jìn)規(guī)則的導(dǎo)航欄

最后讓我們給嵌套表里面的li和a元素增加一些簡(jiǎn)單的樣式以便完善效果：

#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;

}