JQuery 导航栏隐藏在 JQuery 幻灯片后面
我有一个 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>
I have a JQuery dropdown which is hiding behind a JQuery slideshow directly under it, here.
I need to get the dropdown on top...I have tried z-index to no effect.
From what I can see from doing research this is a fairly common issue...can anyone help?
Code:
#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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我只能猜测您在错误的元素上尝试了
z-index。试一试吧。您应该发现这可以解决您的问题。
I can only guess you were trying
z-indexon the wrong element. Give this a go.You should find that will fix your issue.
对于
#nav ul添加position:relative;z-index:1;z-index始终适用于定位元素，正如 css 文档告诉我们的那样。点击此处了解更多信息。
for
#nav uladdposition:relative;z-index:1;z-indexalways applies to positioned elements as css documentation inform us.Read more here.