菜單懸停的z-index錯誤

Question

（解決）

如果你看看這個WIP你會看到該菜單懸停狀態不覆蓋下面的內容，我不知道爲什麼發生這種情況和我嘗試添加的z-index值的UL樹的大部分地區，包括最外層的導航標籤 -

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-index的

• 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); 
     /* ... */ 
    }