javascript - 下拉菜单推送父菜单项

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