菜单悬停的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); 
     /* ... */ 
    }