html下拉菜单和其他按钮重合


图片描述

如图,导航的下拉菜单用jquery控制,菜单下拉之后,和下面的“上海”按钮重合,上海按钮跑到上面来了,甚至会收回菜单选成上海按钮。

  • jquery代码

 $(document).ready(function(){
  $(".d1").hover(function(){
    $("#drop1").fadeIn();
  },function(){
    $("#drop1").fadeOut();  
  });

    $(".d2").hover(function(){
    $("#drop2").fadeIn();
  },function(){
    $("#drop2").fadeOut();  
  });

  $(".d3").hover(function(){
    $("#drop3").fadeIn();
  },function(){
    $("#drop3").fadeOut();  
  });


});

  • city代码

 <div id="city" class="f-20 container">
            <ul>
            <li  class="list-s l-left"><a href="#">杭州</a></li>
            <li  class="list-s l-center"><a href="#">苏州</a></li>
            <li  class="list-s l-right"><a href="#">上海</a></li>
            </ul>
       </div>
       </div>

  • 这个导航列表的代码

 <li class="capsule list-s  d3"><a class="caps" href="#">跟拍摄影</a>
            <div id="drop3"  class="drop">
          <ul class="d">
          <li class="drop-t"><a href="#">婚礼跟拍</a></li>
          <li><a href="#">会议跟拍</a></li>
          <li class="drop-b"><a href="#">活动跟拍</a></li>
          </ul>
        </div></li>

jquery htm css

没安全提示问题 10 years, 4 months ago

 .drop {
    position: relative;
    z-index: 2333;
}

奥妮克希亚 answered 10 years, 4 months ago

下拉菜单的z-index必须大于导航列表的z-index.

DeCoET answered 10 years, 4 months ago

Your Answer