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