下拉菜单为什么被焦点图挡住了

Question

<nav id="menu">

  <ul>

    <li><a href="">首    页</a></li>

    <li><a href="">T    恤</a>

      <ul>

        <li><a href="">光变色</a></li>

        <li><a href="">CALM</a></li>

        <li><a href="">海悦</a></li>

        <li><a href="">复刻</a></li>

        <li><a href="">十二星座</a></li>

        <li><a href="">好小猫</a></li>

        <li><a href="">独角仙</a></li>

        <li><a href="">薛继夜</a></li>

        <li><a href="">字</a></li>

      </ul>

    </li>

    <li><a href="">衬     衫</a>

      <ul>

        <li><a href="">定制</a></li>

        <li><a href="">免烫</a></li>

        <li><a href="">高支</a></li>

        <li><a href="">休闲</a></li>

        <li><a href="">短袖衬衫</a></li>

        <li><a href="">法兰绒</a></li>

        <li><a href="">牛津纺</a></li>

        <li><a href="">青年布</a></li>

      </ul>

    </li>

    <li><a href="">  C9  </a>

      <ul>

        <li><a href="">卫衣</a></li>

        <li><a href="">外套</a></li>

        <li><a href="">衬衫</a></li>

        <li><a href="">裤装</a></li>

        <li><a href="">T恤</a></li>

      </ul>

     </li>

    <li><a href="">外    套</a>

    <ul>

        <li><a href="">羽绒服</a></li>

        <li><a href="">大衣</a></li>

        <li><a href="">西服</a></li>

        <li><a href="">夹克</a></li>

        <li><a href="">针织衫</a></li>

        <li><a href="">定制</a></li>

      </ul>

     </li>

     <li><a href="">  麻  </a>

      <ul>

        <li><a href="">麻衬衫短袖</a></li>

        <li><a href="">麻衬衫长袖</a></li>

        <li><a href="">棉麻西服</a></li>

        <li><a href="">麻衬衫裙</a></li>

      </ul>

     </li>

     <li><a href="">  水棉柔  </a>

      <ul>

        <li><a href="">拉链开衫</a></li>

        <li><a href="">长袖V领</a></li>

        <li><a href="">长袖圆领</a></li>

        <li><a href="">短袖</a></li>

      </ul>

     </li>

     <li><a href="">裤    装</a>

      <ul>

        <li><a href="">商务</a></li>

        <li><a href="">休闲裤</a></li>

        <li><a href="">牛仔裤</a></li>

        <li><a href="">麻裤子</a></li>

        <li><a href="">针织裤</a></li>

        <li><a href="">沙滩裤</a></li>

      </ul>

     </li>

     <li><a href="">  鞋  </a>

      <ul>

        <li><a href="">复古跑鞋</a></li>

        <li><a href="">户外鞋</a></li>

        <li><a href="">帆布鞋</a></li>

        <li><a href="">皮鞋</a></li>

        <li><a href="">休闲鞋</a></li>

      </ul>

     </li>

     <li><a href="">家居配饰</a>

      <ul>

        <li><a href="">袜品</a></li>

        <li><a href="">床平套件</a></li>

        <li><a href="">被子</a></li>

        <li><a href="">枕</a></li>

        <li><a href="">家具毯</a></li>

        <li><a href="">旅行箱</a></li>

        <li><a href="">童装</a></li>

      </ul>

     </li>

  </ul>

</nav>

<div id="slideshow">

  <ul>

    <li><img src="lunbo1.jpg"></li>

    <li><img src="lunbo2.jpg"></li>

    <li><img src="lunbo3.jpg"></li>

    <li><img src="lunbo5.jpg"></li>

  </ul>

  <div id="slideshow-nav"></div>

</div>

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var duration = 3000; //每张图片的持续显示时间

var speed = 1000; //图片切换的动画时间

var width = $('#slideshow').width(); //获得单张图片的宽度

var curIndex = 0; //设置当前显示图片的索引值

var totalIndex = $('#slideshow > ul > li').length; //获得总的图片数量

var timer; //设置一个计时变量

$('#slideshow > ul > li').each(function(index) {

$(this).css("left", index*width+"px"); //设置轮播图片的横向排列

$('#slideshow-nav').append("<span>"+(index+1)+"</span>"); //在导航中添加相应的节点

    });

$('#slideshow-nav > span').each(function(index) {

$(this).attr("index", index); //存储每个节点的索引值

$(this).click(function(){ //当span元素被点击时

curIndex = $(this).attr("index")-1; //刷新当前显示图片的索引值

clearTimeout(timer); //清除计时

move(); //重新执行move函数以显示该图片

});

    });

$('#slideshow-nav > span').eq(0).addClass("active"); //设置第一个圆点为active

var firstChild = $('#slideshow > ul > li').eq(0).clone(); //将第一张图片复制一份

$('#slideshow > ul').append(firstChild); //将该图片添加到列表最末

firstChild.css("left", totalIndex*width+"px"); //将复制的第一张图片显示在图片序列最右侧

function move(){

curIndex++; //使索引值加以1

if(curIndex>totalIndex){ //当索引值大于图片总数时

curIndex = 1; //表示当前应播放第2张图片

$('#slideshow > ul').css("left", "0px"); //将图片序列重置到原点

}

for(var i=0; i < totalIndex; i++){

$('#slideshow-nav > span').eq(i).removeClass("active"); //清除所有导航节点的active类

}

if(curIndex === totalIndex){

$('#slideshow-nav > span').eq(0).addClass("active"); //如果当前索引值等于图片总数，则说明当前正显示第一张图片的副本，因此应激活第一个导航节点

}else{

$('#slideshow-nav > span').eq(curIndex).addClass("active"); //在其余情况下，则为当前导航节点添加active类

}

$('#slideshow > ul').animate({left:width*curIndex*-1+"px"},speed); //为图片序列创建动画

timer = setTimeout(move,duration+speed); //设置延迟一定时间后执行move函数，延迟时间等于动画时长加上每张图片的持续显示时间

}

timer = setTimeout(move,duration); //设置延迟一定时间后执行move函数，延迟时间等于每张图片的持续显示时间

});

</script>

Answer 1

元素层级问题需要看css样式表才能看出来哦 不过一般焦点图都会设置定位(position) 你可以尝试下把你的下拉菜单的最外层元素（应该是吧 nav 下拉菜单中 与焦点图同级的元素）加上相对定位 或者固定定位 并用z–index提高层级