根據(jù)頁(yè)面設(shè)計(jì)的需要，有時(shí)候我們使用圖象翻轉(zhuǎn)菜單，所謂圖象翻轉(zhuǎn)菜單是指在鏈接狀態(tài)、鼠標(biāo)激活狀態(tài)實(shí)現(xiàn)不同的圖片效果。
　　在通常的圖象翻轉(zhuǎn)菜單制作中，會(huì)出現(xiàn)閃爍的情況，這是因?yàn)閳D片載入延時(shí)所造成的，也就是圖象還未完全加載沒能完全顯示，加載時(shí)間的間隔就會(huì)出現(xiàn)閃爍的現(xiàn)象。
　　我們今天所要討論的是將圖象翻轉(zhuǎn)菜單的多種狀態(tài)制作成一張圖片，我們應(yīng)用css對(duì)背景圖片的位置進(jìn)行控制，進(jìn)而實(shí)現(xiàn)一張圖片多種狀態(tài)的圖象翻轉(zhuǎn)菜單效果。

　　這張圖片從上至下結(jié)合了三個(gè)不同的狀態(tài)，鏈接樣式，激活樣式，當(dāng)前頁(yè)樣式。
　　來(lái)看下面的css代碼：


　　我們來(lái)看下面的xhtml代碼：


　　#nav li聲明了圖象按鈕區(qū)域的寬高，去掉了列表標(biāo)記，并且設(shè)置右邊距兩個(gè)象素，溢出部分直接隱藏。

　　#nav li a同樣聲明了寬與高，溢出部分直接隱藏。設(shè)置了內(nèi)邊距，距離頂部50px，這一設(shè)置有什么作用呢？我們需要考慮一種情況的發(fā)生，假如用戶在瀏覽網(wǎng)頁(yè)的時(shí)間，由于網(wǎng)速等原因沒有能加載css文件，那用戶根本沒有辦法點(diǎn)擊鏈接，因?yàn)殒溄拥亩�義全部寫在css文件中，我們除了應(yīng)用圖片區(qū)域塊的無(wú)序列表的鏈接，還應(yīng)該加上文字鏈接，這樣就不必?fù)?dān)心沒有CSS文件無(wú)法訪問(wèn)。同時(shí)也有利于SEO，讓搜索引擎更輕易的抓取網(wǎng)站上的內(nèi)容。文字鏈接是不能與圖片區(qū)域重合的，這樣就會(huì)發(fā)生重疊影響美觀，我們?cè)O(shè)置距離頂部50px，文字已經(jīng)位于圖象區(qū)域以外，并且設(shè)置了溢出部分直接隱藏。在正常情況下是看不到文字鏈接的。在下面的運(yùn)行效果中，你可以去掉CSS樣式定義看看實(shí)際效果。

　　#nav li a.an　聲明了名稱為an的類的背景圖片，不重復(fù)，位置是距頂距左均為0.
　　#nav li a:hover　聲明了激活時(shí)背景圖片的位置，距頂部-43px；也就實(shí)現(xiàn)了圖片中間位置那一按鈕的效果。
　　#nav li a.dang 聲明了當(dāng)前頁(yè)圖片的位置，距頂部-86px；也就實(shí)現(xiàn)了圖片最下面位置那一按鈕的效果。這三個(gè)CSS代碼中，最重要的就是background-position屬性，關(guān)于background-position的說(shuō)明，請(qǐng)點(diǎn)擊這里。

　　細(xì)心的你一定注重到在無(wú)序列表的第一個(gè)鏈接中，我們使用了class="an dang"，這是一種非凡的聲明方式，大家在實(shí)際使用中可以靈活的應(yīng)用，這一聲明表示，這一鏈接，使用an與dang雙重效果。
　　請(qǐng)您非凡注重：class="an dang"的結(jié)合運(yùn)用效果，就實(shí)現(xiàn)了當(dāng)前頁(yè)指引，我們不需要修改任何樣式與圖片，只需要在當(dāng)前欄目的 class="an"更改為class="an dang"即可。

　　羅嗦了這么多，我們來(lái)看下面的運(yùn)行效果：