下拉菜单推家长菜单项

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