橫向選單製作方法
儘管在我的網站和文章裡都有提到CSS製作選單的方法，但很多初學者還是不太清楚如何實現，以及實現原理，我想專門寫一篇詳細教學會對大家比較有幫助。
我們先來看一個選單的例子，最終效果是：
然後我們來詳細講解步驟：
第一步：建立一個無序列表（Unordered Lists）
我們先建立一個無序列表，來建立選單的結構。原始碼是：
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">服務介紹</a></li>
<li><a href="#">技術支援</a></li>
<li><a href="#">立刻購買</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>效果是：
第二步：隱藏li的預設樣式
因為看起來不是很好看，選單通常都不需要li預設的圓點，我們給ul定義一個樣式來消除這些圓點。
當然，為了更好的控制整個選單，我們把選單放在一個div裡。頁面原始碼變成：
<div class="test"><ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">技術支援</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯繫我們</a></li>
</ul></div>CSS定義為：
.test ul { list-style: none; }說明：“.test ul”表示我要定義的樣式將作用在test層裡的ul標籤上。
現在的效果是沒有圓點了：
第三步：關鍵的浮動
這裡是選單變成橫向的關鍵，我們給li元素加上一個“float: left;”屬性，讓每個li浮動在前面一個li的左邊。
CSS定義為：
.test li { float: left; }效果是：
看！選單變橫向了。就這麼簡單！下面需要做的就是優化細節了。
第四步：調整寬度
選單都擠在一起不好看怎麼辦？我們來調整li的寬度。
在CSS中添加定義width: 100px指定一個li的寬度是100px，當然你可以根據你的需要調整數值：
.test li { float: left; width: 100px; }效果是：
如果我們同時定義外面div的寬度，li就會根據div的寬度自動換行，例如定義了div寬350px，6個li的總寬度是600px，一行排不下就自動變成兩行：
.test { width: 350px; }效果是：
第五步：設置基本連結效果
接下來，我們通過CSS來設置連結的樣式，分別定義:link、:visited和:hover的狀態。
.test a:link { color: #666; background: #CCC; text-decoration: none; }
.test a:visited {color: #666; text-decoration: underline; }
.test a:hover {color: #FFF; font-weight: bold; text-decoration: underline; background: #F00; }效果是：
第六步：將連結以塊級元素顯示
有朋友問，選單連結的背景色為什麼沒有填滿整個li的寬度？嗯，解決的方法很簡單，在a的樣式定義中增加display: block，使連結以塊級元素顯示。
同時我們微調了如下細節：
- 用text-align: center將選單文字居中
- 用height: 30px增加背景的高度
- 用margin-left: 3px使每個菜單之間空3px距離
- 用line-height: 30px定義行高，使連結文字縱向居中
CSS定義像這樣：
.test a { display: block; text-align: center; height: 30px; }
.test li { float: left; width: 100px; background: #CCC; margin-left: 3px; line-height: 30px; }效果變成：
這樣就漂亮多了吧。
第七步：定義背景圖片
我們通常都會在每個連結前加一個小圖示，這樣導航更清楚。CSS是採用定義li的背景圖片來實現的：
.test a:link { color: #666; background: url(arrow_off.gif) #CCC no-repeat 5px 12px; text-decoration: none; }
.test a:hover { color: #FFF; font-weight: bold; text-decoration: none; background: url(arrow_on.gif) #F00 no-repeat 5px 12px; }說明：background: url(arrow_off.gif) #CCC no-repeat 5px 12px;這句原始碼是一個CSS縮寫，表示背景圖片是arrow_off.gif；背景顏色是#CCC；背景圖片不重複“no-repeat”，背景圖片的位置是左邊距5px、上邊距12px；
預設狀態下，圖標為arrow_off.gif，當鼠標移動到鏈接上，圖標變為arrow_on.gif。
效果變成：
現在CSS的完整原始碼是：
.test ul { list-style: none; }
.test li { float: left; width: 100px; background: #CCC; margin-left: 3px; line-height: 30px; }
.test a { display: block; text-align: center; height: 30px; }
.test a:link { color: #666; background: url(arrow_off.gif) #CCC no-repeat 5px 12px; text-decoration: none; }
.test a:visited { color: #666; text-decoration: underline; }
.test a:hover { color: #FFF; font-weight: bold; text-decoration: none; background: url(arrow_on.gif) #F00 no-repeat 5px 12px; }網頁的完整原始碼是：
<div class="test"><ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">技術支援</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯繫我們</a></li>
</ul></div>好了，主要步驟就是這七步，立刻拷貝和修改原始碼試試，你也可以用CSS做橫向選單了！
