如何制作一個像amazon.com上的下拉菜單？

Question

如何制作一個類似amazon.com的下拉/幻燈片菜單，當您將鼠標懸停在“按部門購物”時，然后將鼠標懸停在所有選項上時，另一個菜單會根據您的鼠標懸停在右側，以顯示內容？ （如果可能，僅使用CSS3，而不使用javascript）？

另外，假設您有多個部門（例如亞馬遜），那么具有多個div是可行的：

<div id="department1" style="display:none">
Content for department1
</div>
<div id="department2" style="display:none">
Content for department2
</div>
...

要在獲得下拉菜單后獲得該滑出部分，我將div id稱為“ currentdepartment”來更改在onmouseover上對任何“部門名稱”進行更改時所更改的內容，我通常會這樣做：$（“＃currentdepartment”）。html（$ （ “＃department1”）。HTML（））

有什么更好的方法可以實現理想的性能嗎？ （基於速度和空間[[在同一頁面上的鼠標懸停時，每個部門的內容似乎有多個div似乎很浪費]]

Answer 1

不久前，有人寫了一篇關於亞馬遜下拉框的博客文章：

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Answer 2

亞馬遜為此構建了自己的Jquery。 當然，他們使用了其他庫，例如Jquery和Sizzle，但它們不能直接使用腳本，也不能直接使用此特定腳本。

因此，您的答案將是，亞馬遜基本上使用CSS精靈，Jquery和Sizzle為其代碼開發自己的Custom腳本。 我檢查了代碼，它涉及到5500行以上，除非您正在構建Amazon第2部分，否則我認為這對您不可行。

因此，我建議您尋找易於構建的下拉菜單，並且將其作為動態驅動器的起點

它們具有易於使用的菜單和教程，以指導您使用它們。 希望能回答您的問題