托盘菜单在内容后向下滑动

Tray Menu Slides Down After Content

本文关键字：菜单更新时间：2023-09-26

我一直在看这个菜单，但我有一个奇怪的问题，我似乎无法弄清楚 - 并且感觉有点愚蠢！我希望它作为托盘菜单在现有内容上向下滑动。但是，它会在内容下方向下滑动。我似乎无法弄清楚为什么会发生这种情况。帮助？

https://jsfiddle.net/ticklishoctopus/gdfv4wzn/

$(window).on('resize', function() {
      $('ul.sub-menu').each(function() {
        var width = 0;
        $(this).children('li').each(function() {
          width += $(this).width();
          console.log('inner width' + $(this).width());
        });
        console.log('total width' + width);
        $(this).css('padding-left', $(window).width() / 2 - width / 2);
      });
    });
    $(window).trigger('resize');

@import url(https://fonts.googleapis.com/css?family=Cabin);
    html,
    body {
      margin: 0;
      padding: 0;
      font-family: Cabin, sans-serif;
      text-transform: uppercase;
      background-color: #ade;
    }
    .clear {
      clear: both;
    }
    ul,
    li {
      list-style: none;
      text-indent: none;
    }
    .menu {
      width: 100%;
      z-index: 50;
      display: block;
      background: blue;
      height: 110px;
      margin-top: 0px;
      box-sizing: border-box;
      background-image: url('images/gradient-line.png');
      background-repeat: repeat-x;
      background-position: left bottom;
      padding-right: 30px;
    }
    .menu .menu-item {}
    .menu .menu-item a {
      display: block;
      float: left;
      font-size: 13pt;
      line-height: 64px;
      height: 100px;
      font-weight: 700;
      text-decoration: none;
      color: #fff;
      padding: 5px 30px;
      margin-top: 25px;
    }
    .menu .menu-item .sub-menu {
      position: absolute;
      left: 0;
      top: -50px;
      z-index: -1;
      transition: all .5s;
      width: 100%;
    }
    .menu .menu-item .sub-menu li {
      display: inline-block;
    }
    .menu .menu-item:hover .sub-menu {
      top: 150px;
    }
    .menu .menu-item .sub-menu .menu-item a {
      text-align: center;
      background: rgba(155, 75, 105, .8);
      padding: 0 20px;
      display: block;
      float: left;
      color: #ddd;
      border: none;
      height: 64px;
      font-size: 12px;
    }
    .menu .menu-item .sub-menu .menu-item a:hover {
      color: #fff;
    }
    .menu .menu-item:hover .sub-menu .menu-item a {
      height: 64px;
      display: block;
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .sub-menu {
      background-color: #fff;
      padding-top: 30px;
      padding-bottom: 20px;
      text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <header>
        <ul class="menu">
          <li class="menu-item"><a href="#">MENU 1 <i class="fa fa-sort-desc"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Mission</a></li>
              <li class="menu-item"><a href="#">History</a></li>
              <li class="menu-item"><a href="#">News &amp; Conventions</a></li>
              <li class="menu-item"><a href="#">Customer Service</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">MENU 2 <i class="fa fa-sort-desc"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Catalog</a></li>
              <li class="menu-item"><a href="#">Sketches</a></li>
              <li class="menu-item"><a href="#">Accessories</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">MENU 3 <i class="fa fa-sort-desc"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Catalog</a></li>
              <li class="menu-item"><a href="#">Sketches</a></li>
              <li class="menu-item"><a href="#">Accessories</a></li>
            </ul>
          </li>
        </ul>
      </header>
      <p class="clear"></p>
      <main>
        Content goes here.
      </main>
    </body>

如前所述，您必须将元素一直定位到子菜单。它还有助于将菜单 ul 本身包装在一个定位的div 中，其 z 索引高于页面内容：

.header-wrapper {
  position: relative;
  display: block;
  z-index: 1;
}
.menu {
    position: relative;
    width: 100%;
    display:block;
    background: blue;
    height: 110px;
    margin-top: 0px;
    box-sizing: border-box;
    background-image: url('images/gradient-line.png');
    background-repeat: repeat-x;
    background-position: left bottom;
    padding-right: 30px;
}
.menu .menu-item {
  position: relative;
}
.menu .menu-item a {
    display: block;
    position: relative;
    float: left;
    font-size: 13pt;
    line-height: 64px;
    height: 100px;
    font-weight:700;
    text-decoration: none;
    color: #fff;
    padding: 5px 30px;
    margin-top: 25px;
}