jquery - 菜单和 slider 可见性问题

Question

将鼠标悬停在产品或示例上以查看问题。也许有人在过去遇到过这个问题并且确切地知道出了什么问题。我尽力通过 css 代码将菜单和 slider 的定位从绝对定位替换为相对定位等等。当我将图片定位从绝对定位更改为继承时，我几乎得到了答案，但还不够，它只是部分解决了问题。简而言之，我被卡住了，所以任何其他想法都会受到赞赏。

.lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0;   left:0;    z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%;    width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{    position:relative;  height:100%;    width:900px;    z-index:3px;    overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;   background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;  padding:0px;    margin:0;   position:relative;  overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;    padding:0px;margin:0px; float:left; position:inherit;}
.lof-slidecontent  .lof-opacity  li{position:absolute;  top:0;  left:0;     float:inherit; }


.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
background:url(../images/transparent_bg.png) repeat;
padding:5px 0px;
   }
.lof-slidecontent  .navigator-wrapper{  position:relative;  z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
    }

这附近的某个地方可能是 z-index 的问题？

这是完整的代码和问题:

http://jsfiddle.net/melbourne/vjG56/

Answer 1

像这样将position: 和z-index 添加到菜单中:

.menu, .menu ul {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    z-index: 999;
}