Drop down menu 向下移动内容的Drupal下拉菜单

我需要一个菜单/超大菜单，当下拉菜单打开时，它会将内容向下移动，就像在Facebook for Business menu上一样： 我在Avast上看到了同样的效果：

谢谢你的帮助，非常感谢

对于您想要的行为，您可以使用：JQuery的函数。然后，您可以在菜单项上绑定mouseover和mouseout事件，并调用slideDown和slideUp函数

HTML:

---

你好，Nicolai谢谢你的帮助。我现在正在尝试这个；我会让你知道事情的进展：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active menu-item" data-menuItem="#getstarted">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                </li>
                <li class="menu-item" data-menuItem="#css"><a href="http://getbootstrap.com/css">CSS</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 menu-panel" hidden="" id="getstarted">
        <ul>
            <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
            <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
            <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
            <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
            <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>   
        </ul>
    </div>
    <div class="col-xs-12 menu-panel" hidden="" id="css">
        <ul>
            <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
            <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
        </ul>
    </div>    
</div>

$(".menu-item").mouseenter(
    function(e){        
        e.preventDefault();
        e.stopPropagation();
        var $active=$(".active-menu-panel");
        $active.removeClass("active-menu-panel").hide();
        var selector=$(this).attr("data-menuItem");
        if($active.length){
            $(selector).addClass("active-menu-panel").show();
        } else {
            $(selector).addClass("active-menu-panel").slideDown();
        }
    }    
);

$(".menu-panel").mouseleave(function(){
    $(this).removeClass("active-menu-panel").slideUp();
});