今天我們繼續(xù)深入學(xué)習(xí)相關(guān)的內(nèi)容，今天的這個(gè)CSS菜單形式上比較炫，在實(shí)現(xiàn)的時(shí)候有幾個(gè)需要注重的地方：
　　1、具體的分析圖片格局，確定好背景圖片的定位；
　　2、如何隱藏掉菜單內(nèi)的鏈接文字。MB5U.com原創(chuàng)

　　下面的圖片是今天這個(gè)CSS菜單實(shí)例的最終效果（可點(diǎn)擊放大）：


　　我們看下面的XHTML代碼：


　　我們賦予了body一個(gè)id：page_a。這是用于實(shí)現(xiàn)當(dāng)前頁(yè)效果的，我們?cè)诤竺嬖僮髡f(shuō)明。
　　我們建立了一個(gè)id為nav的無(wú)序列表ul作為菜單的容器。在菜單中有列表項(xiàng)五個(gè)。我們作重說(shuō)說(shuō)第一個(gè)，其它的四個(gè)與之類(lèi)似。
　　li列表項(xiàng)的id為navind。這是作為列表項(xiàng)的選擇符存在的，我們可以通過(guò)此選擇符控制列表項(xiàng)及列表項(xiàng)內(nèi)的鏈接的樣式。MB5U.com原創(chuàng)
　　a鏈接的id為cur1。這是方便用于實(shí)現(xiàn)當(dāng)前頁(yè)的效果。我們后面會(huì)介紹如何編寫(xiě)CSS代碼。


　　我們定義無(wú)序列表ul的寬度和高度，設(shè)置溢出為隱藏，距離頂部20象素，左右方向居中對(duì)齊。
　　我們預(yù)先制作好如下的圖片，請(qǐng)注重，這是一個(gè)圖片文件，我們?cè)诓藛蔚牟煌�部分進(jìn)行不同的定位即可：（可點(diǎn)擊放大）


　　最上面一排是菜單的正常形式，第二排是菜單的鼠標(biāo)懸停時(shí)的形式，最下面一排是當(dāng)前頁(yè)的效果。
　　或許你還沒(méi)有明白一張圖片是如何實(shí)現(xiàn)的，我們通過(guò)背景圖片的定們來(lái)實(shí)現(xiàn)，看下面的圖片：（可點(diǎn)擊放大）


　　我們模擬對(duì)菜單進(jìn)行分割，得到了這樣的N個(gè)小區(qū)域，這每一列就是我們菜單的三個(gè)狀態(tài)，而紅線也標(biāo)出了我們應(yīng)該如何對(duì)菜單進(jìn)行定位了。我們看下面的表格：


　　有了這樣清楚的思路，我們就可以動(dòng)手編寫(xiě)CSS代碼了。MB5U.com原創(chuàng)


　　除了最左邊的mb5u.com這個(gè)菜單之外，其它四個(gè)菜單的寬度是一致的，我們對(duì)其li及鏈接a進(jìn)行CSS樣式定制，設(shè)置為塊元素，寬度與高度分別是：116px、55px。設(shè)置溢出為隱藏，防止內(nèi)部元素?fù)伍_(kāi)容器而使頁(yè)面很難看。


　　我們?cè)O(shè)置所有五個(gè)菜單的a鏈接元素的填充距頂為60px。溢出為隱藏。這樣我們就成功的實(shí)現(xiàn)了將菜單內(nèi)的文字推到可視區(qū)域以外了。即：文字位于距頂部60px的地方，而我們的菜單高度為55px。所以文字是不可見(jiàn)的。僅當(dāng)用戶(hù)沒(méi)有用完全下載CSS文件時(shí)，我們的菜單也不會(huì)失效，CSS文件未打開(kāi)圖片雖然看不到了，但這些文字就發(fā)揮它們的作用了，依然可以起到導(dǎo)航的作用。


　　設(shè)置所有的li列表項(xiàng)向左浮動(dòng)。MB5U.com原創(chuàng)


　　上面這一大段代碼定義了鼠標(biāo)的兩種狀態(tài)下菜單所表現(xiàn)出來(lái)的樣子。結(jié)合上面兩個(gè)分析圖片，相應(yīng)你能很快的理解這些代碼的意義。只是第一個(gè)由于尺寸與其它菜單有所區(qū)別，所以單獨(dú)的定義了寬與高。


　　我們用這些代碼實(shí)現(xiàn)了CSS當(dāng)前頁(yè)的效果。我們所需要做的是給body賦予不同的id，即可實(shí)現(xiàn)了菜單背景圖片的不同定位，而指示出當(dāng)前頁(yè)是在哪一個(gè)欄目。