解決方案
在一個導航系統中顯示子菜單最好的辦法是在一個列表中創建子列表。這樣標記的兩級導航欄很容易被理解 – 哪怕瀏覽器不支持CSS。
為了產生多級導航欄，我們創建一個嵌套的列表，為這些新的列表項樣式化顏色、邊界和鏈接屬性：
!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. 包含子菜單的導航欄
討論
嵌套列表是用來描述我們正在做的導航欄系統的好辦法。第一個列表包含站點的主要部分，在Recipes下面的子列表顯示了Recipes范圍之內的子部分。即使沒有任何CSS樣式，列表的結構依然清晰且容易理解，就象你在圖5看到的一樣。
圖5：沒有使用樣式，包含子菜單的導航欄
下面是我們用來在主要項目的li元素里面標記這個簡單的嵌套列表的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，不做任何修改的話，導航菜單的顯示將如圖6。由于li元素繼承主菜單的樣式，子列表將呈現出主導航欄一樣的樣式。
圖6：采用默認樣式表子菜單導航欄
為了讓嵌套的列表呈現出它是一個子菜單而不是主導航欄一部分的效果，讓我們增加一個樣式規則：
#navigation ul ul {
margin-left: 12px;
}
這個規則將縮進嵌套列表，讓它在主菜單的右邊界對齊，象圖7顯示的這樣：
圖7：帶有縮進規則的導航欄
最后讓我們給嵌套表里面的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實現會折疊、展開的菜單導航欄效果
- JQuery 浮動導航欄實現代碼
- 用CSS開發時髦的導航欄圖例教程
- 又一個漂亮的導航欄的下拉菜單
- JavaScript NodeTree導航欄(菜單項JSON類型/自制)
