jquery下拉菜单定位

Question

我需要创建一个下拉菜单，该菜单将打开而不是向下打开。 经过this，我想出了如何创建一个下拉菜单，然后根据我的要求修改它，最终得到了this（小提琴）。

我现在想让这个下拉菜单粘在页面底部，所以我将容器的CSS更改为

position:absolute;bottom:0;

。但是，我的下拉菜单不再正确显示，如此处所示。

任何人都可以解释为什么会发生这种情况以及如何正确执行此操作吗？

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

谁能解释一下为什么会发生这种情况？

Answer 1

演示

在你的 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

位置，您就可以在所有情况下使用固定脚本