【发布时间】:2012-06-02 01:55:53
【问题描述】:
我的页面中有“尴尬的展示”,但上面有一个下拉菜单。问题是陈列柜与菜单重叠,并不完全可见。
我可以纠正 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”中。
【问题讨论】: