CSS下拉菜單（當子元素時，停止父元素處於活動狀態）

我有一個項目，我正在爲一些簡單的CSS按鈕工作，並試圖爲它們創建一個匹配的下拉菜單。問題是，當我點擊子菜單中的一個項目時，它上面的所有父母也會進入活動狀態。我打算使用父選擇器，但只有它們不存在。這裏是演示頁面：http://jsfiddle.net/td7bk/4/。CSS下拉菜單（當子元素時，停止父元素處於活動狀態）

謝謝！

編輯：現在，演示只與Firefox完全兼容，因爲它使用了-moz-transition和-moz-box-shadow屬性以及border-radius屬性。

來源

2012-03-01 Ian

我沒有看到你怎麼能沒有某種JavaScript。因爲你在技術上將鼠標懸停在所有選定的按鈕上，並在技術上點擊所有按鈕，因爲它們具有相同的類別。也許分開級別之間的類？ – tedski 2012-03-01 15:53:17

不要把你的轉換放在.anibutton上。所有的父母都有這門課，所以他們都得到了轉變。將其應用於內容（您將需要換行）。 – mrtsherman 2012-03-01 15:59:30

我試圖製作一個任何人都可以輕鬆使用的代碼，但是如果我必須讓列表中的每個級別都有一個不同的類（對它們進行樣式設置並控制顯示和隱藏），那將會變得更加複雜。另外，我不認爲它會起作用。我看過其他下拉菜單的CSS代碼，他們絕對沒有我的問題。我無法弄清楚爲什麼。 – Ian 2012-03-02 02:46:10

如果你願意/能夠調整你的html一點點，這是可能的只是CSS。我注意到你有一個span標籤在幾個li元素中包裝文本，但不是全部，所以我不確定這是否是一個需求。

查看http://jsfiddle.net/td7bk/8/爲例。

此外，如果您正在尋找快速提示的心情，請查看調整後的css選擇器。簡化和更高效。

希望這會有所幫助！

來源

2012-03-02 08:19:38 brains911

謝謝！我需要跨度來使文本移動。我一定會使用它。 – Ian 2012-03-02 14:51:54

CSS下拉菜單（當子元素時，停止父元素處於活動狀態）

回答

相關問題