任何人都可以提供參考或完全可以創建一個菜單取決於 CSS和not a single bit of javascript？沒有javascript的CSS菜單
該要求是一個下拉菜單，它可以有很多children (submenu)。
如果像這樣創建將會是cross browser compatible？
任何有關這個主題的幫助將不勝感激！
編輯
感謝您的輸入多了一個疑問
可以這樣來實現，而不是使用ul li
說div span組合，可以幫助我實現了菜單，不會改變我目前的HTML結構！
訣竅是:hover僞類。
<ul class="menu">
<li>
<a href="...">Menu Item 1</a>
<ul class="submenu">
<li><a href="...">Submenu 1</a></li>
<li><a href="...">Submenu 2</a></li>
</ul>
</li>
<li>
<a href="...">Menu Item 2</a>
<ul class="submenu">
<li><a href="...">Submenu 3</a></li>
<li><a href="...">Submenu 4</a></li>
</ul>
</li>
</ul>
好嗎？因此，您的整個子菜單必須進入與其對應的主菜單項的<li>。然後爲CSS：
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
做一些樣式，並完成工作。
編輯：對於另一層菜單，它非常簡單。使用這個CSS：
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
請注意，我把它換成.menu>li:hover與.menu li:hover。這會告訴瀏覽器在主菜單下面找到所有li元素（不只是直接後代），並在懸停時顯示其子菜單。我也擺脫了使用子菜單類，因爲如果您將CSS放在後代上，它並不是真的需要。這可以讓你添加任意數量的水平。
檢查這個網站：http://www.cssplay.co.uk/menus/它有很多不同的菜單與CSS只。一個參考。
確實有可能只在CSS中做下拉菜單，許多網站現在都在使用它。
你不會得到（但）與CSS是任何動畫展開等 - 菜單隻會切換可見和隱藏。如果你想動畫展開，jQuery可能是一個更好的選擇。也就是說，CSS動畫確實存在。它只在一個或兩個瀏覽器中實現，但您可以將其添加到樣式表中;它不會破壞不支持它的瀏覽器;他們只是不會獲得動畫。
只要忽略IE6，CSS菜單的跨瀏覽器兼容性相對容易。 IE7/8可以在不用太多大驚小怪的情況下工作，但對於幾乎所有僅限CSS的菜單技術，IE6都會受到嚴重破壞。如果可能，儘量避免支持IE6。它是一箇舊的瀏覽器，真的需要讓它平靜下來。
其他人已經提供了一些很好的例子的鏈接，所以我在這裏不再重複。
我剛剛完成開發移動設備的CSS菜單，使用絕對零Z JavaScript。基本上，通過將tabindex="-1"屬性應用於任何你想要的東西，你允許該元素對:focus CSS屬性做出反應，而實際上並不是Tab鍵順序的一部分（所以你不能通過Tab鍵來訪問該元素）。運用這一目前公認的解決方案：
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li><a href="...">Submenu 1</a></li>
<li><a href="...">Submenu 2</a></li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li><a href="...">Submenu 3</a></li>
<li><a href="...">Submenu 4</a></li>
</ul>
</li>
</ul>
我刪除了<a>標籤（因爲現在我們的下拉式菜單點擊，我們就可以隨心所欲的點擊插入tabindex和CSS被改成這樣：
.menu > li:not(:focus) > .submenu { display: none; }
退房這個Codepen我的手機菜單：
我不認爲這是完全可能的。這就是爲什麼像着名的suckerfish這樣的CSS下拉菜單都有JavaScript助手的原因。 – 2011-02-02 11:02:21
@Pekka它是可能的，它可以在大多數瀏覽器（最近5年左右的所有瀏覽器以及一些較舊的瀏覽器）上運行。請參閱下面的解決方案，瞭解它的工作原理。 – 2011-02-02 11:52:23