CSS只有滑動菜單

我想弄明白。我不明白的是它是如何工作的 - 我無法理解子菜單如何保持隱藏，並且不會干擾頁面的其他部分。

請允許我進一步解釋 - 當我試圖自己創作時，我在腦海中想要隱藏並顯示子菜單（我在使用DIV標籤時認爲我很聰明），但當它們變得可見時，然後在DOM中佔據他們的位置，並將其他所有東西移出（我明顯想避免的東西，但完全不瞭解如何完成）。當我試圖用JS製作我的作品時，它並沒有像我想的那樣工作。我將嵌套DIV標籤（子菜單）的'display'和'visibility'屬性分別更改爲'none'和'hidden'，直到發生onmouseover事件，並且它不能正常工作，我不知道如何製作一些工作就像這個例子。

我看着懸停命令，看不到這是如何使子菜單隱藏，直到盤旋。我也只能看到display：block命令作爲它們顯示方式的唯一參考，但不明白它們在顯示時不會移動其他任何東西。

這是否有意義？任何人都可以解釋這個例子是如何工作的，DOM模型是什麼樣的，以及DOM的所有部分是如何相互作用的？ W3C在這裏幫助不大。

我的印象是，DOM模型是靜態的，除非你添加一些複雜的z-index或其他方法，所以我在這裏丟失了什麼？我也更喜歡純粹的CSS解決方案，這就是爲什麼我發佈上面的例子，我想比我目前更明白這一點。

非常感謝您的幫助！

來源

2012-10-23 user1360809

檢查代碼？ –

答案是：絕對位置。

位置絕對從靜態流中移除元素，因此不會推開其他元素。要控制絕對定位的元素，可以將它們包裝在相對定位的元素中：偏移父元素。這樣，你可以創建塊/菜單/等。在一個正常的流程中有絕對定位的元素。

對於簡要說明：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

顯示無/塊部分只是隱藏/顯示子菜單的。如果父母獲得：懸停，則可以使用display：block顯示子菜單。

來源

2012-10-23 14:59:42

感謝您的回覆！大幫忙！我仍然沒有看到懸停部分，只有我可以在示例中找到的引用是，每個部分都設置爲顯示：塊 - 它是如何直到懸停才顯示的？ – user1360809

您需要使用'：hover'選擇器來定義新樣式規則：div {display：none; } div：hover {display：block;請記住，你可能不得不使規則更具體，我只是使用'div'作爲例子。 – Godwin

謝謝，我理解你的例子，但我仍然沒有看到第二個UL標籤（子菜單）是如何顯示的，直到在例子中懸停，我不認爲display：none設置在任何地方，只顯示：在所有部分塊... – user1360809

CSS只有滑動菜單

回答

相關問題