IE8リストアイテムは、サブメニューがアクティブなときに他のリストアイテムに影響を与えます

Question

私はリストを使用してメインメニューを持っています。ユーザーが項目の上を移動すると、ユーザーは、背景色を変更してそのサブメニューを表示しながら、上に移動してユーザーにカーソルを移動します。

Link to the website with the issue.

あなたは放火犯が必要な場合は、クエリ文字列に真のデバッグ=を追加します。

問題は、サブメニューがアクティブで、ユーザーが、彼らはあまりにもオーバーで推移しているように、前の項目のすべてが行動メインレベルで任意のリスト項目の上に置いた場合はIE8です。つまり、これらのリスト項目は上に移動しますが、background-colorは変更されません。ユーザーがリスト項目の上にマウスをどのように動かすかに応じて、項目のいくつかは開始位置の下にぶら下がることさえあります。

SASSは、私がCSSに変換したものです。そのようなメニュー項目をどのように移動するのかを理解するのに役立ちます。

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

サブメニューがアクティブであるとしないとの間のHTMLの唯一の違いは、メインレベルのリスト項目は、任意のCSSで使用されていないクラスsubactiveを有している、アクティブなサブリストの項目はクラスactiveを得ます。

私は、問題がbackground-colorの変更と負の値margin-topの間にあると感じています。

通常、影響を受ける要素は以前のものではなく、影響を受ける要素が予想されます。

Javascriptの修正はご遠慮ください。

ありがとうございました！

Answer 1

IE8では、margin-top: -15pxを調整すると、LIをULボックスの外側に移動させる代わりに、ULボックスの上端を押し込みます。他のすべてのタブは新しいULボックスに合うように上に移動します。

ノンホバーのLIをmargin-top: 15pxに設定し、LIをmargin-top: 0 --reverseに設定することをおすすめします。

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

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

（これはまだクロスブラウザを動作します。）私のためにそれをやった