我們在MB5U.com的文章中，介紹了不少CSS橫向菜單的制作方法與思路。今天我們說說豎向菜單的制作。橫向菜單主要是通過浮動，讓本來按列顯示的元素變成一行顯示，而豎向菜單的制作就相對簡單了很多，最主要的還是在于視覺效果。我們看今天制作的CSS豎向菜單的最終效果，如下圖：


　　我們定義一個UL無序列表作為菜單的容器，設置其左邊框及背景圖片。讓菜單項自行從上而下的排列，定義鏈接鼠標懸停時的背景與UL的背景有所區(qū)別。這款菜單就這樣簡單的搞定了。我們看下面的XHTML代碼：


　　XHTML代碼沒啥好說的了。我們說說CSS代碼：


　　整體布局聲明，文字大小及加粗，去除文字裝飾線。邊距與填充均為零。設置body的背景色為白色#fff，我們經(jīng)常忽略body背景色的設置，總是認為瀏覽器默認的網(wǎng)頁背景色就是白色的，其實不然，有些時候并非都是白色，為了更加嚴謹，我們還是聲明body的背景色為白色。


　　UL無序列表menu，去除列表項預設標簽，設置左邊框為10px的橙色實線。邊距設置為上下50px，左右為自動，實現(xiàn)了UL的水平居中對齊于瀏覽器窗口。設置寬度與高度分別是160px、247px（為什么設置這樣的高度看下面的說明），溢出設置為隱藏，背景為白色，圖片距離左側1px，垂直方向重復。


　　設置列表項li的下邊框為1px的白色#fff實線。設置鏈接a為塊元素，文字顏色為淡黃色#fffeee，文字縮進26px，行高為30px。鼠標懸停時鏈接產(chǎn)生背景（顏色及圖片），顏色為白色#fff，背景圖片產(chǎn)生了變化，在UL中背景圖片是：bga_mb5u.com.jpg。在鏈接懸停狀態(tài)中背景圖片是：bgb_mb5u.com.jpg。


　　關于UL高度設置為247px的說明：

　　通過上面的設置我們注重到，列表項的下邊框有一個1px的白色實線。假如我們去掉UL的高度設置將會看到如下效果：


　　在紅色圓圈內箭頭所指的部分，UL的左邊框10px的實線凸出了一點點。這就是因為列表項的下邊框有一個1px的白色實線。讓整個菜單看起來不是那么完美了。

　　我們發(fā)現(xiàn)共用八個菜單，每個菜單的高度是30px（行高） 1px（li的下邊框線）=31px。通過這些我們可以計算出UL的合理高度應該是：31px*8-1px=247px。這就是我們設置UL的高度為247px的原因，當然，為了正常顯示我們設置溢出為隱藏。這樣就達到了最終的較完美效果。