Выпадающее меню - z-порядок - PullRequest
Новая
       23

Выпадающее меню - z-порядок

0 голосов
/ 03 октября 2011

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

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

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

enter image description here

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

1 Ответ

1 голос
/ 03 октября 2011

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

...