Блог

У меня есть выпадающее меню:

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

Если я помещу два меню (одно над другим) Я получу всплывающее меню под второй строкой меню.

Как я могу это исправить?

Добавление z-index:999; в div.dropdown-slider должно довольно быстро решить вашу проблему.