只用CSS做的下拉式菜單--A Drop-Down Menu With Only CSS

最近在網上發現了一個只用CSS實現的下拉式菜單(Drop-Down Menu)，感覺很新鮮也很酷。於是仔細看了作者的介紹以及原始碼，發現核心就是一個":hover"偽類的使用。在CSS1中此偽類僅可用於a對象。且 對於無href屬性（特性）的a對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。但IE6及其以下版本都不能很好的支援CSS2，因此 IE6及其以下版本就不能很好的運行這個程式了。所幸Firefox,Netscape,Opera,Safari等瀏覽器的最新版本均能很好的運行該 程式(其他版本我沒試過)。
我在網上找了一下解決該BUG的方法，最終找到一個不是很理想的方法，使用外掛程式---IE7。這個外掛程式能彌補很多IE6在CSS，透明PNG映像顯示等方面的缺陷。使用也很簡單，下載（44KB）解壓後參見裡面的README就能搞定。
下面說說我做的一個樣本吧，你可以先看一下最終效果。
下面說幾個關鍵的地方：
1、這段代碼是為了使該菜單能在IE6及其以下版本的IE瀏覽器中都能正常工作而寫的。匯入了IE7這個外掛程式中的ie7-standard-p.js這個 檔案。如果你能確保所有看到你的這個菜單的人都使用IE7或者Firefox,Opera,Netscape等瀏覽器的最新版本的話，那麼大可以去掉該行 代碼。

<script src="IE7_0_9/ie7-standard-p.js"></script>

2、該行代碼是定義子功能表預設狀態為隱藏。

#menu ul .item {...}{display:none;}

3、這行是關鍵代碼。它的意思是當ul為hover狀態時，顯示子功能表。

#menu ul:hover .item{...}{display:block;}

4、這幾行代碼建立了一個菜單（菜單一），它有三個子功能表。

<DIV id="menu">
<ul id="item1">
<li class="top">菜單一</li>
<li class="item"><a href="#">子功能表一</a></li>
<li class="item"><a href="#">子功能表二</a></li>
<li class="item"><a href="#">子功能表三</a></li>
</ul></div>