ページで「ぎこちないショーケース」を実行していますが、上にドロップダウンメニューがあります。問題は、ショーケースがメニューと重なっていて、完全に表示されていないことです。
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」で発生します。