Question

我需要创建一个下拉菜单，它会打开而不是打开。通过this，我想出了如何创建下拉菜单，然后根据我的要求对其进行修改，最终生成this (fiddle)。

我现在想让这个下拉贴在页面底部，所以我将容器的css更改为position:absolute;bottom:0;。但是，我的下拉列表无法正常显示，如here所示。

任何人都可以解释为什么会这样，以及如何正确地做到这一点？

提前致谢。：）

编辑：

感谢kei和bukfixart，我现在使用下面给出的代码交替使用相同的结果：它们在IE9中工作，但在Chrome或Firefox中不起作用（读取：表现得很奇怪）。你可以看到奇怪的行为here。请注意，只有当所有4个选项卡位于同一行时才会发生这种情况。

任何人都可以解释为什么会发生这种情况吗？

提前致谢。：）

Answer 1

DEMO

在你的jQuery中，从

更改它

    submenu.css({
        position: 'absolute',
        top: $(this).offset().top - submenu.height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

到

    submenu.css({
        position: 'absolute',
        bottom: $("#container").height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

Answer 2

这有一个简单的原因。

您应该使用此

替换您的代码

    submenu.css({
        position: 'absolute',
        top:  - submenu.height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

（删除了父级的高度）。你给了父母一个绝对的定位。所以孩子们都是以父母的位置为导向。在这种情况下，计算中不需要高度

只需将#container元素设为relative或absolute位置，即可在所有情况下使用固定脚本

jquery下拉菜单定位

2 个答案: