导航栏二级菜单被轮播图遮住，加了最外层的Z-index position 还是不行

Question

*{ margin: 0px; padding: 0px; } #nav{ z-index:99999px; position:absolute; ;} #nav ul li{ float:left; list-style:none; margin:auto; padding:0; text-align:center; position:relative; z-index:99999px; } #nav ul li a{ display:block; width:94px; background-color:#8E4406; color:#FFF; padding:5px 10px; text-decoration:none; z-index:99999px; } #nav ul li a:hover{ background-color:#FFF; color:#8E4406; } #nav ul li a:visited{ text-decoration:none;} #nav ul li a.last{ border-right:0;} #nav ul li ul{ display:none; position: absolute; z-index:99999px; } #nav ul li:hover ul { display: block; z-index:99999px; } #nav ul li ul li { float: none;/* 调整二级菜单怎么显示 ， none竖着显示*/ z-index:99999px; opacity:0.85; } #frame {/*----------图片轮播相框容器----------*/ position:absolute; /*--绝对定位，方便子元素的定位*/ width: 456px; height: 350px; overflow: hidden;/*--相框作用，只显示一个图片---*/ border-radius: 5px;/*圆角边框---*/ left: -2px; top: 200px; z-index:0px; } #photos img { float: left; width:466px; height:200px; } #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/ position: absolute;z-index:9px; width: calc(466px * 5);/*---修改图片数量的话需要修改下面的动画参数*/ } .play{ animation: ma 15s ease-out infinite alternate;/*设置动画属性 指定要绑定到选择器的关键帧的名称;完成一个周期需要20s；动画以低速结束；指定动画应该播放无限次（永远）；动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放*/ } @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/ 0%,20% { margin-left: 0px; } 25%,40% { margin-left: -466px; } 45%,60% { margin-left: -932px; } 65%,80% { margin-left: -1398px; } 85%,100% { margin-left: -1864px; } } .num{ position:absolute;z-index:10; display:inline-block; right:10px;top:165px; border-radius:100%; background:#f00; width:25px;height:25px; line-height:25px; cursor:pointer; color:#fff; text-align:center; opacity:0.8; } .num:hover{background:#00f;} .num:hover,#photos:hover{animation-play-state:paused;} .num:nth-child(2){margin-right:30px} .num:nth-child(3){margin-right:60px} .num:nth-child(4){margin-right:90px} .num:nth-child(5){margin-right:120px} #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}/*ease-out 动画以低速结束;forwads表示让动画停留在结束状态，即停留在最后一帧*/ #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;} #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;} #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;} #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;} @keyframes ma1 {0%{margin-left:-1864px;}100%{margin-left:-0px;} } @keyframes ma2 {0%{margin-left:-1864px;}100%{margin-left:-466px;} } @keyframes ma3 {100%{margin-left:-932px;} } @keyframes ma4 {100%{margin-left:-1398px;} } @keyframes ma5 {100%{margin-left:-1864px;}

无标题文档

• 首页
  • 二级菜单
  • 二级菜单1
• 美食
  • 二级菜单2
  • 二级菜单3
• 饮料
  • 二级菜单4
  • 二级菜单5
• 点心
  • 二级菜单6
  • 二级菜单7

1 2 3 4 5

Answer 1

代码贴乱套了。建议你f12看下css中zindex顺序，特别是排列组合找到哪个样式影响的