有沒有一種更好的，符合標準的方式來爲網站製作下拉式導航欄，而不是純CSS 2？

Question

我們都看過無數的CSS 2下拉菜單，而那些曾經是製作網站下拉菜單的最佳方式。但是，我想知道：

有了所有這些新技術，有沒有比CSS 2更好的方式來製作下拉菜單：基於hover的隱藏div菜單？

我仍然使用舊的CSS 2懸停菜單的原因是因爲我還沒有發現其他的東西是跨瀏覽器兼容的，簡單的，符合標準的，並且被儘可能多的最終用戶正確查看。

底線是，我想在網站開發的各個方面儘可能地向前邁進，但這是一個領域，我不確定它是否可以繼續前進。

是時候放棄「網站不應該依賴於javascript」標準並開始使用jQuery下拉菜單嗎？

Answer 1

當前在網絡開發領域的思考是，你應該採取逐步增強的方式來建立你的網站。這是一種從下到上的分層方法：基本內容（語義HTML）形成基礎，外觀和感覺（CSS）置於頂層，最後功能位於頂層（由JavaScript提供）。

您正在談論的方法將是上述的前兩個層次（HTML & CSS）。除了這個之外，你總是可以使用jQuery來爲菜單提供功能或者額外的花式觸摸，前提是你做到這一點不引人注目（就是說，使用jquery選擇器以編程方式連接事件）。例如，您可以使用jQuery使菜單在懸停時淡入淡出。

現在需要意識到的重要一點是，您不需要拋棄CSS來做這種事情 - 它不是一個或兩類問題。通過像這樣分層，並且不加介入地使用JavaScript，您將獲得一個完全適用於所有訪問者的網站！那些沒有 JavaScript和沒有 CSS將獲得基本內容，並且他們可以瀏覽您的網站（儘管它看起來不漂亮！）。那些沒有 javascript，但與 CSS仍然會有一個基本菜單，在懸停時有一個下拉菜單，只使用CSS進行設置。而那些與 JavaScript和與 CSS將獲得該網站的最佳表現形式，CSS提供外觀和感覺，JavaScript提供額外的功能/效果。

你應該從中得到什麼是網站不需要在每個瀏覽器中看起來都一樣。對於無法使用的瀏覽器，請確保內容可以不受阻礙地呈現在其基本形式中。對於功能更強大的瀏覽器，添加額外的樣式和功能層以利用其更高級的功能。基本上，每個人都可以訪問您的內容有意和你仍然可以得到進一步推你的web開發:)

本文闡述的概念比我以往任何時候都可以：http://www.alistapart.com/articles/understandingprogressiveenhancement

Answer 2

關注點的分離以及正確使用CSS和HTML需求。如果您使用HTML正確（顯示的內容），您的導航應該是這個樣子：

<ul id="nav"> 
    <li> 
     <a href="#">Home</a> 
     <ul> 
     <li> 
      Sub Menu Item 
     </li> 
     <li> 
      Sub Menu Item 
     </li> 
     <li> 
      Sub Menu Item 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Products</a> 
     <ul> 
     <li> 
      Sub Menu Item 
     </li> 
     <li> 
      Sub Menu Item 
     </li> 
     <li> 
      Sub Menu Item 
     </li> 
     </ul> 
    </li> 
    </ul> 

這是冗長，可以肯定的，但它顯示的內容和它的語義和有效的，瀏覽器兼容。對於額外的獎勵，它看起來罰款沒有CSS。

使用CSS正確，我們將增加以下內容：

#nav 
    { 
    padding:5px; 
    margin:0; 
    } 
    #nav > li{ 
    display:inline; 
    position:relative; 
    } 
    #nav > li ul 
    { 
    position:absolute; 
    width:150px; 
    background-color:red; 
    color:#fff; 
    left:0; 
    margin:0; 
    padding:0; 
    display:none; 
    } 
    #nav > li ul li{ 
    display:block; 
    } 
    #nav > li:hover ul 
    { 
    display:block; 
} 

這是相當簡單的，我甚至在裏面添加了幾個unneccesary造型。我使用了直接的後代選擇器（element> element），所以它在舊版IE中不起作用，但是如果你重構了它，這完全是跨瀏覽器兼容的。更不用說它是有效和簡單的。

您似乎自相矛盾：您希望覆蓋儘可能多的用戶，但前進，並且您考慮使用JavaScript。爲什麼？通常，如果禁用JavaScript，則JavaScript方法會使子菜單項變得不可用。

JavaScript用於改進交互。您可以提出懸停菜單是「交互」的說法，但我認爲它是風格，並且這種方式最容易並且在語義上實現。

也許我想念這裏的東西;但CSS + HTML似乎是一個很好的解決方案，而且根本不是不雅，非語義，不兼容或無效。如果我錯了，請糾正我。