向下滑动垂直菜单而不从子菜单推水平

Question

我有一个菜单列表，左侧是主要标题：

当带有子菜单的菜单项具有悬停状态时，子菜单会下降，但如果菜单比主标题宽（“商店”和“关于”之间的间距），则会将菜单推向右侧 - 正如预期的那样假设）：

我正在尝试让子菜单保持其高度（按下页面下面的内容），但不要根据宽度将项目推到右边。

使用position: absolute时，只需忽略子菜单打开时的高度。

希望有一些我不知道的东西。

感谢您的帮助！

Answer 1

我会动态定位子菜单并将其位置设置为绝对值。您必须将菜单按钮保持在左侧位置和高度，然后将子菜单设置为左侧，将其顶部设置为其父级的高度。如果菜单嵌入页面上的另一个容器中，请不要忘记使用offset（）来获取左侧位置。

Answer 2

尝试将子菜单的宽度设置为父菜单的宽度，然后设置：

text-overflow: inherit;
overflow: visible;

在子菜单

上

Answer 3

我认为向下推送内容可以通过javascript完成（仅限？）。这是the updated fiddle及其来源：

JS：

$(document).ready(function(){
    $("li.drop").hover(function(){
        $(this).addClass("hover");
        $('#nav').css('height', $(this).children('ul:first').height()+30+'px');
    }, function(){
        $(this).removeClass("hover");
        $('#nav').css('height', '');
    });
});

CSS：

#nav > li {
    position:relative;
    display:inline;
    margin:0px 15px;
    padding:0;
}

#nav > li ul {
    display: none;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
}
#nav > li.hover ul {
    display: block;
}

#content {
    height: 50px;
    width: 100%;
    background: grey;
}

#nav ul {
    list-style-type: none;
    padding:0;
}