下拉菜单 - 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可以很快解决您的问题。