1

我的页面中有“尴尬的展示”，但上面有一个下拉菜单。问题是陈列柜与菜单重叠，并不完全可见。

我可以更正更改 z-index，但它仅在我输入时才有效：

尴尬展示的负面索引

下拉菜单的正索引

正因为如此，由于展示柜有箭头来导航滑块，因此无法单击每个。似乎它们（箭头）位于透明层后面，因为它们是可见的，但处于非活动状态。

我的代码：

菜单

    <div id="navmenucontainer">
<ul id="navmenu">
    <li class="main" onclick="javascript: Mostrar(this);" id="menitem1"><a href="#" class="item">Productores</a>
        <div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
         Some menu items
    </div>
    </li>
    </ul>
   </div>

幻灯片

<div id="showcase" class="showcase">
                            <div class="showcase-slide">
                                <div class="showcase-content">
                                    <div class="showcase-content-wrapper">
                                       <img src="images/1.jpg">
                                    </div>
                                </div>
                                <div class="showcase-caption">

                                </div>
                             </div>

CSS

#navmenucontainer {
    z-index:999999;
}

*/ul#navmenu div.sub{
    display: none;
    background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
    position: absolute;
    top:26;
    left:0;
    vertical-align:top;
    padding-top:0;
    padding-bottom: 22px;
    width:1240px;
    /*border-right:1px solid silver;*/
    border:1px solid silver;
    z-index:99999;
    zoom:1;
}

ul#navmenu li {
  margin: 0;
  /*border: 0 none;*/
  padding: 0;
  float:left; /*For Gecko*/
  display: inline;
  list-style: none;
  height: 20px;
}

ul#navmenu ul {
  margin: 0;
  padding: 0;
  float:left;
  width:100%;
}

.showcase
{
    position: relative;
    z-index:-1;
    margin: 0;
}

重叠发生在“.sub”div 和“.showcase”中。

4

1 回答 1

0

这是一个远景，但毕竟它是IE......它可能（几乎）正确或灾难......我遇到了同样的问题，每次都是不同的解决方案，这取决于运气......（IE糟透了，只是引用并同意先前的评论）

将此添加到您的 html

     <!--[if IE]>
<style type="text/css">

#navmenucontainer {
      z-index:3000;
}

ul#navmenu {
      z-index:2000;
}

ul#navmenu div.sub {
      z-index:1000;
}

.showcase {
      position: relative;
      z-index:0;
      margin: 0;
}
        </style>
        <![endif]-->

灵感来自http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

于 2012-06-01T13:53:01.727 回答