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

　　下面的圖片是今天這個CSS菜單實例的最終效果（可點擊放大）：


　　我們看下面的XHTML代碼：


　　我們賦予了body一個id：page_a。這是用于實現(xiàn)當前頁效果的，我們在后面再作說明。
　　我們建立了一個id為nav的無序列表ul作為菜單的容器。在菜單中有列表項五個。我們作重說說第一個，其它的四個與之類似。
　　li列表項的id為navind。這是作為列表項的選擇符存在的，我們可以通過此選擇符控制列表項及列表項內的鏈接的樣式。MB5U.com原創(chuàng)
　　a鏈接的id為cur1。這是方便用于實現(xiàn)當前頁的效果。我們后面會介紹如何編寫CSS代碼。


　　我們定義無序列表ul的寬度和高度，設置溢出為隱藏，距離頂部20象素，左右方向居中對齊。
　　我們預先制作好如下的圖片，請注重，這是一個圖片文件，我們在菜單的不同部分進行不同的定位即可：（可點擊放大）


　　最上面一排是菜單的正常形式，第二排是菜單的鼠標懸停時的形式，最下面一排是當前頁的效果。
　　或許你還沒有明白一張圖片是如何實現(xiàn)的，我們通過背景圖片的定們來實現(xiàn)，看下面的圖片：（可點擊放大）


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


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


　　除了最左邊的mb5u.com這個菜單之外，其它四個菜單的寬度是一致的，我們對其li及鏈接a進行CSS樣式定制，設置為塊元素，寬度與高度分別是：116px、55px。設置溢出為隱藏，防止內部元素撐開容器而使頁面很難看。


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


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


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


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