父母和兄弟姐妹繼承了孩子列表項的風格

我有一個簡單的菜單父母和兄弟姐妹繼承了孩子列表項的風格

<ul id="menu"> 
<li class="leaf"><a href="#">Menu Item 1</a></li> 
<li class="leaf"><a href="#">Menu Item 2</a></li> 
<li class="expanded"><a href="#">Menu Item 3</a> 
    <ul> 
     <li class="leaf"><a href="#">Menu Item a</a></li> 
     <li class="leaf"><a href="#">Menu Item b</a></li> 
     <li class="leaf"><a href="#">Menu Item c</a></li> 
    </ul> 
</li> 
<li class="leaf"><a href="#">Menu Item 4</a></li> 
</ul>

和

ul#menu li:hover {font-weight:bold;}

我現在面臨的問題是，當我將鼠標懸停上方UL李麗，則父母以及所有兄弟姐妹都會獲得懸停效果。我只想要我上面懸停的列表項目來獲得效果。

我試過ul#menu li.leaf:hover {..}, ul#menu li.expanded:hover {..}，但即使在這種情況下，當我將鼠標懸停在li.expanded以上時，它的子代繼承了樣式。

我樣式列表項，不a是很重要的（風格比我貼得更復雜）

我該如何解決這個問題？

來源

2010-05-11 elvista

我不太確定爲什麼會出現這種情況，但我假設您正在嘗試將基於CSS的下拉菜單放在一起？

我會建議您查看http://htmldog.com/articles/suckerfish/dropdowns/。這是一個很好的幫助，我總是將其下拉菜單關閉。

聽起來像你的問題是一些奇怪的繼承錯誤 - 是否發生在所有瀏覽器？

來源

2010-05-11 03:20:02 derekerdmann

不，它不是下拉菜單。當您將鼠標懸停在列表項上（它具有較寬的填充）時，會出現一個圖標，並且當您將鼠標懸停在鏈接上方時會出現不同的效果。我一直在FF 3.6.3 – elvista 2010-05-11 03:25:06

#menu li:hover li { font-weight:normal } 
#menu li:hover, #menu li li:hover {font-weight:bold;}

第一條規則是防止在父級li被徘徊時使所有二級li變爲粗體。然後第二條規則只設置當前懸停的第一級李，並且當前將第二級李懸停爲粗體。

來源

2010-05-11 04:24:42 Galen

測試到目前爲止，感謝您花時間回覆。這確實解決了我的兄弟問題，但是當我將鼠標懸停在孩子上方時，父列表項仍然繼承了樣式。 – elvista 2010-05-11 05:56:54

父母和兄弟姐妹繼承了孩子列表項的風格

回答

相關問題