在第4章，我們學到了如何創建圖像和JavaScript，用下拉功能表可以實現同樣的效果嗎？
解決方法
答案是肯定的...但由此產生的菜單不在Internet Explorer 6運行！然而，圖4.25說明瞭這種技術，與Internet Explorer 7同樣在市場上的收益發揮很大的作用。
Figure 4.25. Creating a CSS-only drop-down menu
標記的例子：
效果執行的規則：
討論
雖然下拉功能表容易受影響而無法在Internet Explorer 6中運行，但可有幾個新的流覽器支持工作。該解決方案允許您不使用任何JavaScrip創建一個下拉功能表。該技術是基於除了詳細名單上的Suckerfish選單解決方案。功能表本身是基於簡單的無序列表。頂層功能表項由一個主要的清單組成，每一個主要項目包括整套的名單：
可以看到在圖4.26時，當製作不適用於功能表上的時候，該網頁顯示為一個邏輯結構和容易發現無序清單。
Figure 4.26. Displaying lists logically in browsers that don’t support CSS
首先，我們取消其名單的風格來製作頂級功能表，。可以水準動態清單專案。該名單的專案有了聯繫的價值立場後，動態的功能表就可以放置：
在鏈結功能表顯示模組，填補矩形領域界定的功能表項。最早的Internet Explorer 6無法識別這個功能表項，但每一個環節設置100 ％的寬度可以確保以補載塊擴展點的選地區,
下一步，點擊整個包括動態功能表的清單，在默認情況下，顯示無。然而，我們確實規定可以顯示絕對定位，而不影響剩下的其他檔：
為了防止我們的動態功能表像主功能表專案從橫向浮動，需要設置為無浮動的標誌：
最後，我們使用遊標移到它的時候，懸停在偽類那就可顯示出動態功能表內的任何專案主功能表：
這些基本的CSS規則的地方，功能表顯示如圖4.27 。
Figure 4.27. Altering the menu display with the addition of basic CSS
此代碼最初設置嵌套名單顯示：無。當用戶將遊標停留在主功能表列表專案，該整個名單內的清單專案設置為顯示：塊、菜單出現。然而，這一做法不能Internet Explorer工作 ，像在該流覽器中懸停偽類只用於鏈結上，而不用與其他方面。其餘的CSS僅僅適用於視覺樣式而使功能表好看。
綜述
本章討論了各種不同的方式，使我們可以使用創建導航結構健全的標記，並提供了範例，以此為出發點自己可以創建。在現有的網站技術中是完全不可能設計的，採用基於CSS的導航系統不影響其外觀來改善網站的無障礙環境和負載的速度被認為是一種很好的方式。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
