这是index.html文件
<!--导航栏开始-->
<div class="navi">
<ul class="naviul">
<li class="navili navi1"><a href="index.html">首页</a></li>
<li class="navili navi2">
<a href="#">教务相关</a>
<ul class="navi_detail">
<li><a href="#">课程查询</a></li>
<li><a href="#">成绩查询</a></li>
</ul>
</li>
<li class="navili navi3">
<a href="#">问题反馈</a>
<ul class="navi_detail">
<li><a href="#">宿舍问题反馈</a></li>
<li><a href="#">教室问题反馈</a></li>
<li><a href="#">食堂问题反馈</a></li>
</ul>
</li>
<li class="navili navi4">
<a href="#">信息交流</a>
<ul class="navi_detail">
<li><a href="#">校内论坛</a></li>
<li><a href="#">留言板</a></li>
</ul>
</li>
<li class="navili navi5"><a href="#">关于我们</a></li>
</ul>
</div>
</div>
<!--导航栏结束-->
<!--首页滚动图开始-->
<div class="banner-container">
<div class="banner">
<div class="bd">
<ul>
<li><a href="#"><img src="../images/lunbotu2.jpg"></a></li>
<li><a href="#"><img src="../images/lunbotu1.jpg"></a></li>
<li><a href="#"><img src="../images/2023_11_23_12_00_33_519.jpg"></a></li>
<li><a href="#"><img src="../images/2023_11_23_12_00_55_767.jpg"></a></li>
<li><a href="#"><img src="../images/2023_12_13_10_19_10_935.jpg"></a></li>
</ul>
</div>
<div class="hd"><ul></ul></div>
<a class="prev"></a>
<a class="next"></a>
</div>
</div>
<script type="text/javascript">
$(".banner").slide({
titCell: ".hd ul",
mainCell:".bd ul",
autoPlay: true,
autoPage: true,
});
</script>
<!--首页滚动图结束-->
</div>
这是它的style.css样式代码
.navi {
position: relative;
z-index: 2; /* 设置 .navi 的 z-index 值为 2,确保它在轮播图之上 */
}
.naviul {
width: 1002px;
height: 40px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.navili {
width: 92px;
height: 40px;
line-height: 40px;
}
.navili:first-of-type {
width: 64px;
}
.navili a {
color: white;
font-size: 14px;
font-family: "微软雅黑";
font-weight: bold;
display: block;
text-align: right;
}
.navili:hover {
background: url(../images/shangjian.png) no-repeat center bottom;
}
.navi1 a {
background: url(../images/shouye.png) no-repeat left center;
}
.navi1 a:hover {
background: url(../images/shouye.png) no-repeat left center;
}
.navi2 a {
background: url(../images/jiaowu.png) no-repeat left center;
}
.navi2 a:hover {
background: url(../images/jiaowu.png) no-repeat left center;
}
.navi3 a {
background: url(../images/fankui.png) no-repeat left center;
}
.navi3 a:hover {
background: url(../images/fankui.png) no-repeat left center;
}
.navi4 a {
background: url(../images/xinxi.png) no-repeat left center;
}
.navi4 a:hover {
background: url(../images/xinxi.png) no-repeat left center;
}
.navi5 a {
background: url(../images/guanyu.png) no-repeat left center;
}
.navi5 a:hover {
background: url(../images/guanyu.png) no-repeat left center;
}
.navi_detail {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 1002px;
background-color: #73b8ff;
justify-content: space-around;
z-index: 99999999; /* 设置 .navi 的 z-index 值为 2,确保它在轮播图之上 */
visibility: hidden; /* 初始状态设置为隐藏 */
}
.navi_detail li {
width: 92px;
}
.navi_detail a {
text-align: center;
background: none;
}
.navi_detail a:hover {
background: none;
}
.navili:hover .navi_detail {
display: flex;
visibility: visible; /* 鼠标移入导航栏时显示二级选项 */
}
.banner {
width: 100%;
height: 197px;
overflow: hidden;
z-index: 1; /* 设置轮播图的 z-index 值为 1 */
}
.banner.down {
top: 240px; /* 将轮播图下移200px */
}
.bd {
position: relative;
height: 100%;
z-index: 1;
}
.banner img {
width: 100%;
z-index: 1;
}
.hd {
position: absolute;
height: 10px;
bottom: 40px;
width: 100%;
z-index: 1;
}
.hd ul {
display: block;
overflow: hidden;
text-align: center;
height: 8px;
z-index: 1;
}
.hd ul li {
display: inline;
height: 10px;
Line-height: 10px;
padding: 0 15px;
background: #fff;
content: '#fff';
cursor: pointer;
margin: 0 2px;
z-index: 1;
}
.hd ul li.on {
background-color: #005d8c;
color: #005d8c;
}
.prev {
position: absolute;
left: 3%;
top: 50%;
margin-top: -25px;
display: block;
width: 32px;
height: 40px;
background: url(../images/slider-arrow.png) -110px 5px no-repeat;
}
.next {
position: absolute;
right: 3%;
top: 50%;
margin-top: -25px;
display: block;
width: 32px;
height: 40px;
background: url(../images/slider-arrow.png) 8px 5px no-repeat;
}
.prev:hover {
opacity: 1;
}
.next:hover {
opacity: 1;
}
/*轮播图结束*/
请问为什么我的导航栏二级选项依然会被轮播图覆盖,而不是显示在轮播图之上。我已经对z-index进行设置了呀。