Question

我的手机菜单出现问题，它看起来像z-index问题，因为菜单切换时，它会显示在下面的内容后面。但是，我一直在玩这个，我无法将切换菜单放在前面。

代码： HTML：

        <section class="navigation">
            <div class="nav-container">
                <div class="brand">
                    <a href="/" title="Storey &#38; Co. Solicitors" rel="home"><img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey &#38; Co. Solicitors" title="Storey &#38; Co. Solicitors"></a>
                </div>
                <nav>
                    <div class="nav-mobile">
                        <a id="nav-toggle" href="#!"><span></span></a>
                    </div>
                    <ul class="nav-list">
                        <li>
                            <a href="about-us.html">About Us</a>
                        </li>
                        <li>
                            <a href="our-team.html">Our Team</a>
                        </li>
                        <li>
                            <a href="services.html">Services</a>
                            <ul class="nav-dropdown">
                                <li>
                                    <a href="divorce.html">Divorce</a>
                                </li>
                                <li>
                                    <a href="wills.html">Wills</a>
                                </li>
                                <li>
                                    <a href="residential.html">Residential</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>
                        <li class="nav-highlight">
                            <a href="https://www.perfectportal.co.uk" target="_blank">Obtain a Quote</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </section>

Jquery的

        (function($) {
          $(function() {
            $('nav>ul>li').addEventListener('click',function() {
              $(this).children('.nav-dropdown').show();
            });
            $('nav>ul>li').mouseleave(function() {
              $('.nav-dropdown').hide();
            });
          });
            document.querySelector('#nav-toggle').addEventListener('click', function() {
            this.classList.toggle('active');
          });
          $('#nav-toggle').click(function() {
            $('nav ul').toggle();
          });
        })(jQuery);

萨斯

        header
            background: $brand-primary
            height: $nav-height
            clear: both

        section.navigation
            padding: 0px
            clear: both

        nav
          float: right
          ul
            list-style: none
            margin: 0
            padding: 0
            li
              float: left
              position: relative
              a
                display: block
                padding: 0 20px
                line-height: $nav-height
                background: $brand-primary
                color: #fff
                text-decoration: none
                &:hover
                  background: $brand-3-dark
                  color: #fff
                &:not(:only-child):after
                  padding-left: 4px
                  content: ' ▾'
              ul li
                min-width: 190px
                & a
                  padding: 15px
                  line-height: 20px
                  z-index: 1

        .nav-highlight a
            background: $brand-3-dark
            color: #fff

            &:hover
                background: $brand-3-primary

        .nav-dropdown
          position: absolute
          display: none
          z-index: 1
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)

        .nav-mobile
          display: none
          position: absolute
          top: 0
          right: 0
          background: $brand-primary
          height: $nav-height
          width: $nav-height

        #nav-toggle
          position: relative
          z-index: 9
          left: 18px
          top: 22px
          cursor: pointer
          padding: 10px 35px 16px 0px
          span,
          span:before,
          span:after
            cursor: pointer
            border-radius: 1px
            height: 5px
            width: 35px
            background: #fff
            position: absolute
            display: block
            content: ''
            transition: all 300ms ease-in-out
          span:before
            top: -10px
          span:after
            bottom: -10px
          &.active span
            background-color: transparent
            &:before,
            &:after
              top: 0
            &:before
              transform: rotate(45deg)
            &:after
              transform: rotate(-45deg)

        @media only screen and (max-width: $breakpoint)
          .nav-mobile
            display: block
          nav
            width: 100%
            padding: $nav-height 0 15px
            ul
              display: none
              li
                float: none
                a
                  padding: 15px
                  line-height: 20px
                ul li a
                  padding-left: 30px
          .nav-dropdown
            position: static

        @media screen and (min-width: $breakpoint)
          .nav-list
            display: block !important

        .navigation
          height: $nav-height
          background: $brand-primary

        .nav-container
          max-width: $content-width
          margin: 0 auto

        .brand
          position: absolute
          float: left
          padding-top: 10px
          vertical-align: middle
          text-transform: uppercase
          font-size: 1.4em
          box-sizing: border-box
          a,
          a:visited
            color: #fff
            text-decoration: none

        img.header-image
            max-width: 200px

        @media screen and (max-width: $breakpoint-small)
            img.header-image
                max-width: 175px
                padding-top: 10px

现场版本在这里：http://staging-maris-storey.transitiongraphics.co.uk/

帮助表示赞赏

Answer 1

尝试在导航中添加相对位置和更高的z-index：

nav {
    position: relative;
    z-index: 9;
}

Answer 2

我不确定为什么Maggie Serino的回答不适合你，因为它在我测试时起作用。然而，另一种解决方案是将clear:both;添加到第一部分。问题是由您的固定高度header引起的，这导致下面的部分不会被下拉列表推下来。

header + section {
  clear:both;
}

Answer 3

@Grant Smith如果你更喜欢菜单来覆盖你需要给它一个绝对位置的内容（父母需要是相对的）。我已经尝试了一下你的升级，你应该添加：

nav {
    position: relative;
    // your other attributes
}

.nav-list {
    position: absolute;
    width: 100%;
    // your other attributes
}

让我知道它是否有效。

移动菜单z-index问题？

3 个答案: