托盘菜单在内容后滑落

Question

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

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

＆＃13;

＆＃13;

same-lords

＆＃13;

$(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');

＆＃13;

@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;
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

如上所述，您必须将元素一直定位到子菜单。它还有助于将菜单ul本身包装在具有比页面内容更高的z-index的定位div中：

.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;
}