使用CSS制作垂直導(dǎo)航菜單的簡易方法
作為一個成功的網(wǎng)站，導(dǎo)航菜單是永遠不可缺少的。導(dǎo)航菜單的風(fēng)格往往也決定了整個網(wǎng)站的風(fēng)格，因此很多設(shè)計者都會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。在傳統(tǒng)方式下，制作導(dǎo)航菜單是
作為一個成功的網(wǎng)站，導(dǎo)航菜單是永遠不可缺少的。導(dǎo)航菜單的風(fēng)格往往也決定了整個網(wǎng)站的風(fēng)格，因此很多設(shè)計者都會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。在傳統(tǒng)方式下，制作導(dǎo)航菜單是很麻煩的工作。需要使用表格，設(shè)置復(fù)雜的屬性，還需要使用JavaScript實現(xiàn)相應(yīng)鼠標指針經(jīng)過或點擊動作。如果用CSS來制作導(dǎo)航菜單，實現(xiàn)起來就非常簡單了。
建立HTML結(jié)構(gòu)
首先建立HTML相關(guān)結(jié)構(gòu)，將菜單的各個項用項目列表`
- `表示，同時設(shè)置頁面的背景顏色，代碼如下：
- `標記添加下邊線，以分割各個超鏈接，并且對超鏈接``標記進行整體設(shè)置。
```css
navigation li {
border-bottom: 1px solid 9F9FED; /* 添加下劃線 */
}
navigation li a {
display: block;
height: 1em;
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid 151571; /* 左邊的粗邊 */
border-right: 1px solid 151571; /* 右側(cè)陰影 */
}
```
通過設(shè)定`display: block;`，超鏈接被設(shè)置成塊元素，實現(xiàn)鼠標在任何位置激活鏈接的效果。
3. 最后設(shè)置超鏈接的樣式，以實現(xiàn)動態(tài)菜單的效果。
```css
navigation li a:link,
navigation li a:visited {
background-color: 1136c1;
color: FFFFFF;
}
navigation li a:hover {
background-color: 002099; /* 改變背景色 */
color: ffff00; /* 改變文字顏色 */
border-left: 12px solid yellow;
}
```
以上代碼中的具體含義都在注釋中詳細說明了。完成這些設(shè)置后，導(dǎo)航菜單制作就完成了，最終的效果如圖所示，在不同瀏覽器中顯示效果一致。
```html
```
設(shè)置CSS樣式
然后開始設(shè)置CSS樣式，為頁面的背景色設(shè)置淺色，代碼如下：
```css
body {
background-color: dee0ff;
}
```
此時頁面的效果只是最普通的項目列表。
設(shè)定樣式屬性
1. 設(shè)置整個`
- `的屬性，將項目符號設(shè)置為不顯示。
```css
navigation {
width: 150px;
font-family: Arial;
font-size: 14px;
text-align: right;
}
navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
```
通過以上設(shè)置后，項目列表使顯示為普通的超鏈接列表。
2. 為`