Dropdown menu - z-order

I have a dropdown menu:

<div class="buttons">
  <div class="dropdown">
    <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a>
    <div class="dropdown-s开发者_如何学运维lider">
      <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>

And here is js code:

<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>

If I put the two menus (one above other) I'll get popup menu below the second menu line.

How can I fix it?

Adding z-index:999; to div.dropdown-slider should fix your problem pretty quickly.