下拉菜单 - z顺序

Question

我有一个下拉菜单：

<div class="buttons"> 
    <div class="dropdown"> 
    <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a> 
    <div class="dropdown-slider"> 
     <a href="#" class="ddm"><span class="label">New</span></a> 
     <a href="#" class="ddm"><span class="label">Save</span></a> 
    </div> <!-- /.dropdown-slider --> 
    </div> <!-- /.dropdown --> 
    </div> 

而且这里是js代码：

<script> 
     $(document).ready(function() { 

      // Toggle the dropdown menu's 
      $(".dropdown .button, .dropdown button").click(function() { 
       $(this).parent().find('.dropdown-slider').slideToggle('fast'); 
       $(this).find('span.toggle').toggleClass('active'); 
       return false; 
      }); 

     }); 

     // Close open dropdown slider by clicking elsewhwere on page 
     $(document).bind('click', function (e) { 
      if (e.target.id != $('.dropdown').attr('class')) { 
       $('.dropdown-slider').slideUp(); 
       $('span.toggle').removeClass('active'); 
      } 
     }); 
    </script> 

如果我把两个菜单（一个以上等）我会得到第二个菜单行下方的弹出式菜单。

我怎样才能解决这个问题？

Answer 1

将z-index:999;添加到div.dropdown-slider应该很快解决您的问题。