IE7のZ-インデックスを無視したドロップダウンメニューのテキスト

Question

問題： 'ティア2'のサブメニューテキストは、 'ティア3'のサブメニューテキストの前にあります。奇妙なことに、ulは、テキストだけではありません。

http://i41.tinypic.com/ajuhz6.jpg

Iは、zインデックスを行うにはIE7のバグがあることを承知しています。 通常、この状況では、外側のコンテナの1つに子よりも高いzインデックスを与えることで、IE7の問題を解決します。

彼らは私が最初にこれをしようとお勧めします同じ問題を持っているので、誰もがこれを読んでいる場合： - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

何も今のところ私のために働いていないと私は他の場所でスタックオーバーフローとに掲載多くのソリューションを試してみました。私は、メニューの構造を編集することはできません

<div id="wdk_header-container"> 

<div>...</div> 

<div class="wdk_menu-container"> 

    <ul class="wdk_menu-ul wdk_tier_1"> 
     <li class="wdk_menu-item wdk_level_1"> 

      <a href="/"><span>Menu Text</span></a> 

      <ul class="wdk_sub_menu wdk_tier_2"> 
       <li class="wdk_menu-item wdk_level_2"> 

        <a href="/"><span>Menu Text</span></a> 

        <ul class="wdk_sub_menu wdk_tier_3"> 
         <li class="wdk_menu-item wdk_level_3"> 

          <a href="/"><span>Menu Text</span></a> 

         </li> 
        </ul> 

       </li> 
      </ul> 

     </li> 
    </ul> 

</div> 


<div>...</div> 
<div>...</div> 


</div> 

：ここ

は私のコードは、私は、次のHTML構造を持つダウンメニューシンプルな階層のドロップを持っている... です。あなたが見ることができるように、アウトターの最もコンテナ内に他の部門があります。

私は、メニューの階層を表示し、非表示にするには、次のjQueryを使用します。

$(function(){ 

$("ul.wdk_menu-ul li").hover(function(){ 

    $('ul:first',this).css('visibility', 'visible'); 

}, function(){ 

    $('ul:first',this).css('visibility', 'hidden'); 

}); 

}); 

次のCSSは、FirefoxとChromeでなく、IE7で正常に動作します。

<style> 

/* All Menu Items */ 
.wdk_menu-container ul { 
    list-style: none; display: inline; 
    margin: 0px; padding: 0px; 
} 
.wdk_menu-container ul li { 
    float: left; height: 33px; position: relative; display: block; 
} 
.wdk_menu-container ul li a { 
    display: block; height: 100%; 
} 

/* Sub Menu */ 
ul.wdk_sub_menu.wdk_tier_2 { 
    float: left; z-index: 5; position: absolute; 
} 

ul.wdk_sub_menu.wdk_tier_2 a { 
    line-height: 16px; padding: 6px 10px; 
} 

.wdk_menu-container ul.wdk_sub_menu.wdk_tier_2 li a span { 
    display: inline-block; 
} 

/* Sub Sub Menu */ 
ul.wdk_sub_menu.wdk_tier_3 { 
    float: left; z-index: 6; position: absolute; left: 34px; 
} 

</style> 

IE7用に別のスタイルシートを作成します。どんな提案も歓迎して、私を狂ってしまう。さらに詳しい情報が必要な場合はお問い合わせください！ ありがとうございました！

Answer 1

ポジションがあるため、この問題が発生しました.Zインデックスと一緒に要素に絶対的に適用されます。これはIE7では動作しません。 position：relativeを代わりに使用する必要があります（また、サブメニューをスマートに配置する別の方法を見つける）。 http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7