當子菜單處於活動狀態時，IE8列表項懸停會影響其他列表項

我有一個使用列表的主菜單。當用戶將鼠標懸停在某個項目上時，它會向上移動以指示將鼠標懸停在用戶上，同時更改背景顏色並顯示其子菜單。當子菜單處於活動狀態時，IE8列表項懸停會影響其他列表項

添加調試=真正的查詢字符串，如果你需要的螢火蟲。

的問題是在哪裏IE8如果一個子菜單被激活，並且用戶將鼠標懸停在任何列表項在主級以前所有的項目像他們正在上空盤旋了。這意味着這些列表項會向上移動，但background-color不會更改。根據用戶如何將鼠標移動到列表項目上，某些項目甚至會在開始位置下方移動。

這裏是SASS，我轉換爲CSS爲了幫助理解我如何移動我的菜單項。

#mainmenu ul li:hover, 
#mainmenu ul li.active{ 
    margin-top: -15px 
}

HTML中的子菜單之間唯一的區別是活動的，也不是主要的級別列表項具有不使用任何CSS和積極的子列表項獲得一類active類subactive。

我有一種感覺，問題是background-color更改和margin-top負值之間的某處。

通常人們會期望之後的元素會受到影響，而不是之前的元素。

請避免任何Javascript修復請。

謝謝！

在IE8中，當您調整margin-top: -15px時，它會推動UL盒子頂部以適應，而不是讓LI去UL框外。因此所有其他標籤都會向上移動以適應新的UL盒。

我建議將non-hover LI設置爲margin-top: 15px並將LIs懸停爲margin-top: 0 - 反向。

#mainmenu UL LI 
{ 
    margin-top: 15px; 
} 

#mainmenu UL LI:hover 
{ 
    margin-top: 0; 
}

（這仍然會工作的跨瀏覽器。）

2011-08-12 14:53:25

感謝那些爲我做！我想到了UL盒子頂端適合的問題，但IE8調試器告訴我，否則（不應該信任那麼多）。從邏輯上講，它會使所有元素都隨着它而上移，而不僅僅是位於懸停元素左側的元素。再次感謝tho。 –

是的，IE有時候是一團糟。我不知道爲什麼它提出了一些而不是其他的，也許在UL和利潤率上有一些浮動的組合？瀏覽器渲染可能會在您將所有內容互相交互時變得非常複雜。 –

回答