如何用CSS製作橫向菜單?

儘管在我的網站和文章里都有提到CSS製作菜單的方法，但很多初學者還是不太清楚如何實現，以及實現原理，我想專門寫一篇詳細教程會對大家比較有幫助。

我們先來看一個菜單的例子，最終效果是:

首頁

產品介紹

服務介紹

技術支持

立刻購買

聯繫我們

然後我們來詳細講解步驟

第一步：建立一個無序列表

我們先建立一個無序列表，來建立菜單的結構。代碼是：

<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>

效果是：

首頁

產品介紹

服務介紹

技術支持

立刻購買

聯繫我們

第二步：隱藏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>

好了，主要步驟就是這7步，立刻拷貝和修改代碼試試，你也可以用CSS做橫向菜單了！

推薦閱讀：