メニューホバーZインデックスエラー

Question

（解決）

あなたはこのWIPを見ればあなたがメニューホバー状態は以下のコンテンツをオーバーレイしないことがわかります、私はなぜこれが起こっている見当がつかないし、私は、最も外側のnavタグを含め、ULツリーの大部分にZインデックス値を追加しようとした -

http://staffanestberg.com/lesmarket2/product.php

を私は何をしないのですか？

それはここに簡単だ場合は特に部品です -

<div id="menu-wrapper"> 
       <ul id="menu"> 
        <li><a href="#">New arrivals</a> 
         <ul> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Designers</a> 
         <ul> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Clothing</a> 
         <ul> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Shoes </a> 
         <ul> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Accessories</a> 
         <ul> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
          <li><a href="#">Lorem ipsum</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Sale</a></li> 
       </ul> 
      </div> 

header nav #menu-wrapper { 
    position: relative; 
    z-index: 80; 
    width: 625px; 
    height: 31px; 
    text-align: center; 
    background: transparent url(../images/stripe-menu.gif) no-repeat; 
} 
header nav #menu-wrapper a, 
header nav #menu-wrapper a:active, 
header nav #menu-wrapper a:visited, 
header nav #menu-wrapper a:hover { 
    color: #fff; 
} 
header nav #menu-wrapper #menu { 
    position: relative; 
    z-index: 81; 
    margin: 6px 0 0 0; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
} 
header nav #menu-wrapper #menu li { 
    position: relative; 
    z-index: 82; 
    height: 20px; 
    margin: 0 20px 0 0; 
} 
header nav #menu-wrapper #menu ul li:hover a, 
header nav #menu-wrapper #menu li:hover li a { 
    background: none; 
} 
header nav #menu-wrapper #menu li:hover > ul { 
    display: block; 
} 
header nav #menu-wrapper #menu ul { 
    padding: 10px 15px 10px 15px; 
    display: none; 
    width: 140px; 
    height: 200px; 
    position: absolute; 
    top: 20px; 
    left: -15px; 
    text-align: left; 
    z-index: 90; 
    background-color: #000; 
    background-color: rgba(0, 0, 0, 0.85); 
} 
header nav #menu-wrapper #menu ul li:first-child { 
    border-top: 1px dotted #fff; 
} 
header nav #menu-wrapper #menu ul li { 
    float: none; 
    margin: 0; 
    line-height: 18px; 
} 
header nav #menu-wrapper #menu:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
header nav #menu-wrapper html[xmlns] #menu { 
    display: block; 
} 

Answer 1

は、あなたの#menu-wrapper位置に追加してみます（何のベストスーツ）、相対/絶対とzインデックス

• IE7は、一番上の親がz-インデックスを持っていて子どもが他の要素と重なり合うことができるようによく定義されているのが好きです（z-インデックスが低い）

• IE7はt彼はrgba（あなたのul要素）の背景色です。フォールバックカラーを使用してください：

header nav #menu-wrapper #menu ul{ 
     background: rgb(0, 0, 0); /* The Fallback */ 
     background: rgba(0, 0, 0, 0.85); 
     /* ... */ 
    }