下拉菜单推送父菜单项

Question

我有五个父菜单项，第三个有一个子下拉菜单。当您单击第三个父菜单时，下拉菜单显示，但它将第四个和第五个父菜单项推送到下面。我希望下拉菜单位于父菜单行下方，而不推送任何父菜单项。这是Shopify网站。

http://jsfiddle.net/3s2qhhx3/

//Main nav expanders
$(document).on('click', '#navpanel .mainnav .title', function() {
  $(this).parent().addClass('active').siblings().removeClass('active');
  $(window).trigger('reup-navbar');
});
var navSpeed = 150;
$(document).on('click', '#navpanel .mainnav button', function() {
  //Prep animation on sublist
  if ($(this).parent().hasClass('expanded')) {
    $(this).html('<span class="icon-plus"></span>');
    $(this).siblings('ul').stop(true, true).css('display', 'block').slideUp(navSpeed, 'linear', function() {
      $(this).parent().toggleClass('expanded');
      $(window).trigger('reup-navbar');
    });
  } else {
    $(this).html('<span class="icon-cross"></span>');
    $(this).siblings('ul').stop(true, true).css('display', 'none').slideDown(navSpeed, 'linear', function() {
      $(window).trigger('reup-navbar');
    });
    $(this).parent().toggleClass('expanded');
  }
  $(window).trigger('reup-navbar');
});
$(document).on('click', '#navpanel .mainnav a[href="#"]', function() {
  $(this).siblings('button').trigger('click');
  return false;
});

#navbar #navpanel .mainnav {
  position: relative;
  margin: 0 auto;
}
#navbar #navpanel .mainnav > ul > .active > ul {
  display: block;
  text-align: center;
}
#navbar #navpanel .mainnav li li {
  position: relative;
  display: inline;
  text-align: center;
}

<div class="mainnav">
  <ul class="tier1">
    <li id="blog">blog</li>
    <li class="">
      <a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
    </li>
    <li class="">
      <a class="tier1title" href="/#">Categories</a>
      <ul class="tier2">
        <li class="">
          <a href="/collections/knits">Knits</a>
        </li>
        <li class="">
          <a href="/collections/tops">Tops</a>
        </li>
        <li class="">
          <a href="/collections/dresses">Dresses</a>
        </li>
        <li class="">
          <a href="/collections/bottoms">Bottoms</a>
        </li>
        . . .
        <li class="">
          <a class="tier1title" href="/collections/sale">Sale</a>
        </li>
        <li class="registerform">
          ...
        </li>
      </ul>
</div>

Answer 1

您需要将子菜单的position设置为absolute。此外，您需要将第一个<li>显示更改为inline-block而不是inline。

CSS：

.mainnav {
    position: relative;
    margin: 0 auto;
}

.mainnav ul > li {
    display: inline-block;
    text-align: center;
}
.mainnav ul li:hover ul {
    display:block;
    background:red;
    height:auto; 
    width:auto; 
}
.mainnav ul li ul {
    position: absolute;
    display: none;
    padding: 0;
    margin: 0;
}

希望它有所帮助。 Updated Fiddle ..