解決方案
在一個導(dǎo)航系統(tǒng)中顯示子菜單最好的辦法是在一個列表中創(chuàng)建子列表。這樣標(biāo)記的兩級導(dǎo)航欄很容易被理解 – 哪怕瀏覽器不支持CSS。
為了產(chǎn)生多級導(dǎo)航欄，我們創(chuà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)航欄
討論
嵌套列表是用來描述我們正在做的導(dǎo)航欄系統(tǒng)的好辦法。第一個列表包含站點(diǎn)的主要部分，在Recipes下面的子列表顯示了Recipes范圍之內(nèi)的子部分。即使沒有任何CSS樣式，列表的結(jié)構(gòu)依然清晰且容易理解，就象你在圖5看到的一樣。
圖5：沒有使用樣式，包含子菜單的導(dǎo)航欄
下面是我們用來在主要項目的li元素里面標(biāo)記這個簡單的嵌套列表的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，如果簡單的使用本文前面的CSS，不做任何修改的話，導(dǎo)航菜單的顯示將如圖6。由于li元素繼承主菜單的樣式，子列表將呈現(xiàn)出主導(dǎo)航欄一樣的樣式。
圖6：采用默認(rèn)樣式表子菜單導(dǎo)航欄
為了讓嵌套的列表呈現(xiàn)出它是一個子菜單而不是主導(dǎo)航欄一部分的效果，讓我們增加一個樣式規(guī)則：
#navigation ul ul {
margin-left: 12px;
}
這個規(guī)則將縮進(jìn)嵌套列表，讓它在主菜單的右邊界對齊，象圖7顯示的這樣：
圖7：帶有縮進(jìn)規(guī)則的導(dǎo)航欄
最后讓我們給嵌套表里面的li和a元素增加一些簡單的樣式以便完善效果：
#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;
}
您可能感興趣的文章:- css實(shí)現(xiàn)會折疊、展開的菜單導(dǎo)航欄效果
- JQuery 浮動導(dǎo)航欄實(shí)現(xiàn)代碼
- 用CSS開發(fā)時髦的導(dǎo)航欄圖例教程
- 又一個漂亮的導(dǎo)航欄的下拉菜單
- JavaScript NodeTree導(dǎo)航欄(菜單項JSON類型/自制)
