Jquery下拉菜单定位

Question

我需要创建一个下拉菜单，它将打开而不是下拉。通过这个，我想出了如何创建一个下拉菜单，然后根据我的要求修改它，最终产生了这个(小提琴)。

我现在想让这个下拉粘贴到页面的底部，所以我改变了容器的css为position:absolute;bottom:0;。但是，我的下拉菜单不再正确显示了，如下所示。

谁能解释一下为什么会发生这种情况，以及如何正确地去做?

提前感谢。:)

编辑:

感谢kei和bukfixart，我现在交替使用下面给出的代码，结果相同:它们在IE9中工作，但在Chrome或Firefox中不起作用(阅读:行为奇怪)。你可以在这里看到奇怪的行为。注意，只有当所有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的位置，你可以在所有情况下使用固定的脚本