Question

我的网站菜单上有一个非常简单的JavaScript和CSS悬停菜单设置。它几乎无处不在， EXCEPT - IE8上的z-index存在问题。

.rolloverMenu {
    background-color: #4A5508;
    border-bottom: 1px solid #AC4718;
    border-left: 1px solid #AC4718;
    border-right: 1px solid #AC4718;
    box-shadow: 2px 2px 2px #AC4718;
    float: left;
    margin-left: -15px;
    margin-top: -12px;
    padding: 10px 10px 6px;
    position: absolute;
    width: 200px;
    z-index: 1000;
}

它落后于我的内容，并没有像往常一样保持领先。我知道IE中有不同的堆叠规则，所以任何建议??

（也尝试过设置 z-index:9999;）

Answer 1

将z-index设置为菜单隐藏的div，其z-index低于菜单。

Answer 2

解决方法是：将z-index添加到父容器（div，table，ul ...等）。

示例：

<div class="menu_container">
  menu here..
</div>
<div class="other_content">
  other data here
</div>

div.menu_container应该有一个z-index值，使其内容超过其他div。

悬停菜单z-index IE8

2 个答案: