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

Question

我有一个菜单列表，主标题向左浮动：

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

我试图让子菜单保持其高度（在页面上向下推其下方的内容），但不要根据其宽度将项目向右推。

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

希望有一些我想念的东西。

谢谢你的帮助！

Answer 1

我认为可以（仅？）通过 javascript 将内容向下推送。这是更新的小提琴及其来源：

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;
}

Answer 2

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

text-overflow: inherit;
overflow: visible;

在子菜单上

Answer 3

我会动态定位子菜单并将其位置设置为绝对。您必须获取菜单按钮的左侧位置和高度，然后将左侧子菜单及其顶部设置为其父级的高度。不要忘记使用 offset() 来获取左侧位置，以防菜单嵌入到页面上的另一个容器中。