隱藏在JQuery幻燈片背後的JQuery導航欄

我有一個隱藏在JQuery幻燈片背後的JQuery下拉框，here。隱藏在JQuery幻燈片背後的JQuery導航欄

我需要得到最上面的下拉列表...我試過z-index沒有任何效果。

從我從研究中可以看到的這是一個相當普遍的問題......任何人都可以幫忙嗎？

代碼：

#nav { 
width:800px; 
margin:0px auto 0px; 
height:25px; 
} 

#nav ul { 
height:25px; 
margin:0 0px 0 0; 
padding:0; 
list-style:none; 
} 

#nav ul li { 
background:#76bf43; 
padding:5px 0px 0px 0px; 
margin:0 10px 0 0; 
color:#ffffff; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
width:100px; 
text-align:center; 
height:20px; 
float:left; 
} 

#nav ul li:hover { 
cursor:pointer; 
} 

#nav ul li ul { 
margin:0; 
padding:0; 
} 

#nav ul li ul li { 
padding:0; 
margin:0; 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
height:25px; 
} 



<link rel="stylesheet" type="text/css" href="aaa-styles.css" /> 

<script src="jq.js"></script> 

<script src="jquery.easing.1.3.js"></script> 
<script src="jquery.timer.js"></script> 
<script src="image-rotator.js"></script> 



<script src="hoverIntent.js"></script> 
<script src="superfish.js"></script> 


<script> 

$(document).ready(function(){ 
    $("ul.sf-menu").superfish(); 
}); 

</script> 


</head> 



<body> 

<script> 
$(document).ready(function(){ 

//This keeps track of the slideshow's current location 
var current_panel = 1; 
//Controlling the duration of animation by variable will simplify changes 
var animation_duration = 2500; 

$.timer(6000, function (timer) { 
    //Determine the current location, and transition to next panel 
    switch(current_panel){ 
     case 1: 
      $("#slideshow").stop().animate({left: "-800px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 2; 
     break; 
     case 2: 
      $("#slideshow").stop().animate({left: "0px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 3; 
     break; 
     case 3: 
      $("#slideshow").stop().animate({left: "-800px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 4; 
     break; 
     case 4: 
      $("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 1; 
     break; 
     timer.reset(12000); 
    } 
}); 

}); 
</script>

來源

2011-07-16 Mr Discourse

在Chrome或Safari中使用類似開發人員模式的問題來解決此問題。使用它可以看到應用於動態創建元素的確切樣式... – Kris

我只能猜測你試圖對z-index錯誤的元素。給它一個。

#nav { 
    position: relative; 
    z-index: 40000; 
}

您應該發現這將解決您的問題。

來源

2011-07-16 16:07:58 daryl

我是z正確的元素，但是我忽略了位置：相對。感謝慢跑我的記憶！ –

爲#nav ul添加position:relative;z-index:1;

z-index始終適用於定位元素的CSS文件通知我們。

瞭解更多here。

來源

2011-07-16 16:01:39 Sotiris

隱藏在JQuery幻燈片背後的JQuery導航欄

回答

相關問題