菜單和滑塊可見性故障

Question

懸停產品或示例以查看問題。 也許有人在過去遇到過這個問題，並確切知道什麼是錯的。 我盡我所能，通過CSS代碼菜單和滑塊取代從絕對到相對等定位。幾乎得到了我的答案，當我將圖片的位置從絕對改爲繼承，但是不夠，它的部分技巧。簡而言之，我被卡住了，所以任何其他的想法都會被折服。

.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; 
}