第七章：橫向導航菜單

　　為了用戶體驗更加友好，還是把a轉換成塊級元素，也可以給a設置背景色或背景圖片來更加美觀了，另外再設置鼠標放上時的樣式。

　　#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　#menu ul li { float:left;}

　　#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

　　#menu ul li a:hover { background:#333; color:#fff;}

　　學到這里，常用的樣式大部分都涉及到了，也許許多你還記不住，但至少混個臉熟。為了提高效率，建議大家還是手寫代碼，如果你還不能手寫代碼，就參考上邊的樣式，自己在css編輯器里設置吧，不再大量截圖了。

　　經過上邊的修改，現在的用戶檢驗是不是更加友好了呢。

　　這里的#menu ul li a本來是可以不加float:left的，但IE6下在li沒有設置寬度，#menu ul li a設置display:block的情況下，將會顯示錯亂，所以需要在a上增加float:left來修正。萬惡的IE6，怎么就淘汰不掉呢

　　二、 用圖片美化的橫向導航

　　背景圖片也是網頁制作當中最常用的樣式之一，運用好背景圖片，可以使你的頁面更加出色，更加人性化和更快的加載速度。下面還是用以前視頻教程中的實例進行講解，或者直接去看視頻教程http://www.aa25.cn/div_css/895.shtml。顯示效果如下：

　　用到三張圖片，分別為當前狀態，鼠標放上時樣式，和默認樣式用的圖片：

　　下面修改css樣式，只截圖了一張，設置方法相同：