jquery下拉菜单定位

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