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

我們先建立一個無序列表，來建立菜單的結(jié)構(gòu)。代碼是：

效果是：

• 首頁
• 產(chǎn)品介紹
• 服務(wù)介紹
• 技術(shù)支持
• 立刻購買
• 聯(lián)系我們

第二步：隱藏li的默認(rèn)樣式，去掉圓點

因為看起來不是很好看，菜單通常都不需要li默認(rèn)的圓點，我們給UL定義一個樣式來消除這些圓點。

當(dāng)然，為了更好的控制整個菜單，我們把菜單放在一個div里。頁面代碼變成：

CSS定義為：

說明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。

現(xiàn)在的效果是沒有圓點了：

首頁
產(chǎn)品介紹
服務(wù)介紹
技術(shù)支持
立刻購買
聯(lián)系我們

第三步：關(guān)鍵的浮動

這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個“float:left;”屬性，讓每個li浮動在前面一個li的左面。

CSS定義為：

效果是：

首頁產(chǎn)品介紹服務(wù)介紹技術(shù)支持立刻購買聯(lián)系我們

看，菜單變橫向了。就這么簡單！下面需要做的就是優(yōu)化細(xì)節(jié)了。