0

我需要创建一个打开而不是向下打开的下拉菜单。通过这个，我想出了如何创建一个下拉菜单，然后根据我的要求对其进行修改，最终得到这个（小提琴）。

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

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

提前致谢。:)

编辑：

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

谁能解释一下为什么会这样？？

提前致谢。:)

4

2 回答 2

3

演示

在您的 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
    });
于 2012-12-21T19:47:15.907 回答
2

这有一个简单的原因。

你应该用这个替换你的代码

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

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

只要给#container元素一个relative或absolute位置，你可以在所有情况下使用固定脚本

于 2012-12-21T19:48:56.630 回答