在下拉導航中將文本顏色設置爲活動狀態

Question

我創建了一個導航，您可以將鼠標懸停在某個元素上，並執行包含更多選擇的下拉列表。

我遇到的問題是，當我選擇一個元素，然後將鼠標懸停在子菜單上，主元素顏色不會保持活動狀態。我嘗試添加一個活躍的課程，但似乎沒有工作。

a:active { 
    color: #F1F1F1; 
} 

這是一個jsFiddle這將更好地解釋我遇到的問題。如果有人不介意爲我檢查。那太好了。

謝謝！

Answer 1

所以問題是，當您將鼠標懸停在鏈接本身（a元素）上時，會設置鏈接的顏色。你需要做的是當你將鼠標懸停在包含鏈接及其子菜單的元素上時，鏈接的顏色會發生變化，這樣當你將鼠標懸停在子菜單上時，你仍然懸停在包含元素上（li元素）

此處使用子選擇器>，因此當您將鼠標懸停在父鏈接上時，子菜單鏈接也不受影響。請注意，IE6不理解>選擇器;所以如果你希望他們能夠在遠處工作，你將不得不給孩子a元素類。

CSS：

.sf-menu li:hover > a { 
    color: #F1F1F1; 
} 

JSFiddle here.