2012-05-05 11 views
2

IE 7でz-indexに問題があります。問題はメニュー項目が2行であることです。最初の行項目のいずれかにサブメニューがある場合、IE7はそれをホバーすることはできません。この問題はIE7によってのみ発生します。ここでIE 7のCSS z-indexエラー

は私のコードです:

<div id="wrapper"> 

    <div id="main-nav"> 
     <ul class="main-menu" id="menu-header-menu"> 
      <li class="menu-item"><a href="#">item 1</a> 
       <ul class="sub-menu"> 
        <li class="menu-item"><a href="#"> sub item</a> 
         <ul class="sub-menu"> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 

      <li class="menu-item"><a href="#">item 2</a></li> 
      <li class="menu-item"><a href="#">item 3</a></li> 
      <li class="menu-item"><a href="#"> test item</a> 
        <ul class="sub-menu"> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
        </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS:

#wrapper { 
    width:250px; 
    margin:0 auto; 

} 
#main-nav { 
    background-color:orange; 
    padding: 0 10px;  
    clear: both; 
    display: block; 
    float: left; 
    width: 100%;  
} 

#main-nav ul { 
    list-style: none; 
    margin: 0 0 0 -0.8125em; 
    padding-left: 0; 
} 
#main-nav li { 
    float: left; 
    position: relative; 
} 

#main-nav a { 
    color:#737373; 
    display: block; 
    line-height: 2.333em; 
    padding: 0 1.2125em; 
    text-decoration: none; 
} 
#main-nav ul ul { 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 2.333em; 
    left: 0; 
    width: 188px; 
    z-index: 999; 
} 
#main-nav ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#main-nav ul ul a { 
    background: yellow; 

    height: auto; 
    line-height: 1.4em; 
    padding: 10px 10px; 
    width: 168px; 
} 

#main-nav li:hover > a, 
#main-nav a:focus { 
    color: #373737; 
} 

#main-nav ul li:hover > ul { 
    display: block; 
} 

ここでは、問題を見ることができます。アイテム1にカーソルを合わせると、黄色の背景を持つサブアイテムにマウスカーソルを合わせることはできません。

enter image description here

答えて

2

簡単に修正。あなたのCSSコードの下にこれを追加します。

#main-nav ul li:hover {z-index:9999;} 

問題は、あなたの要素がない前に、ホバリング時に高いZインデックスが必要であることです。

アップロードしたデモへのライブリンクです。 IE7とFF/CHR/SAFの両方で動作します:

http://sotkra.com/stackoverflow/ie7zindex/index.html

私はそれにもかかわらず、それはあまりにも不格好だ、あなたのコードを簡素化を提案します。小さなバグがあります.3つ目のレイヤメニューを表示して終了してから再入力すると、黄色い背景が表示されます。あなたのhtml/cssの

乾杯
G

の適切なクリーンアップで固定する必要があります