用CSS開發時髦的導覽列第二篇_經驗交流

解決方案

在一個導航系統中顯示子功能表最好的辦法是在一個列表中建立子列表。這樣標記的兩級導覽列很容易被理解 – 哪怕瀏覽器不支援CSS。

為了產生多級導覽列，我們建立一個嵌套的列表，為這些新的清單項目樣式化顏色、邊界和連結屬性：

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

Lists as navigation

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

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

#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代碼：

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

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

}

