Subnav：懸停狀態，風格父子懸停子元素？

我正在設計導航的過程。此導航有一個子菜單下拉菜單，可能會在下拉菜單中顯示輔助下拉菜單。實質上，我有兩層子導航項目。Subnav：懸停狀態，風格父子懸停子元素？

這是我的問題：我有一個懸停狀態在我最外面的父項目，讓我們稱之爲「關於我們」。下方的下拉菜單會顯示更多鏈接，當我將鼠標移動到此下拉列表中時，會爲這些鏈接激活不同的懸停狀態。我的問題是，關於「關於我們」的鏈接消失。我希望懸停狀態保持活躍狀態。到目前爲止，這個導航純粹是用CSS完成的，沒有使用JavaScript，如果可能的話，我想完全使用CSS。

每個UL都有一個類，例如父級UL的.main-nav和子級元素的.main-sub-nav。

嘗試，勇於創新，我以爲我可以，例如說（這個例子假設#CCC是高亮顏色家長懸停狀態：

.main-nav li a:hover {background: #ccc;}  
.main-sub-nav li a:hover .main-nav li a {background: #ccc;}

這不工作，我想是因爲我想從子元素引用父元素，它不明白我在做什麼有一個類似的方法來什麼，我做以上實現這一

樣本HTML結構：？

您可以在以下開發站點完整查看此代碼：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

注意當您將鼠標懸停在上面關於我們，並將鼠標移動到subnav時，關於我們的亮點消失。

就像我說過的，我想用純粹的CSS來解決這個問題，最好是不添加任何類。這個變得複雜了，因爲這個nav完全是用PHP生成的，添加更多的類只是變得討厭。

來源

2013-01-24 Michael

我想這應該解決的問題，

.main-nav > li:hover > a {background: #ccc;}

DEMO

來源

2013-01-24 17:24:03 ocanal

這完美地工作，我已經看到了在此之前>語法，我在這裏發現了這個話題上堆的人誰不知道它做什麼。 http://stackoverflow.com/questions/746525/how-is-the-greater-than-or-character-used-in-css – Michael

Subnav：懸停狀態，風格父子懸停子元素？

回答

相關問題