下拉相对定位问题

Question

我有3个按钮，每个按钮都会触发自己的下拉内容div。我需要下拉菜单跨越页面的整个宽度。我知道我可以改变下拉列表的位置：绝对达到全宽但这会导致问题，将自己定位在页脚上方而不是将其推下来。

这可能是我在css中遗漏的一些基本内容，但我花了好几个小时试图调试这个并且我没有运气。

我在评论中设置了一个codepen

任何帮助都会非常感激。

Answer 1

如果你想在不使用position: absolute的情况下使其工作，你将不得不稍微改变html标记。

您必须将所有.toggleContent div移出li，因为当您尝试将其设为全宽时，它们会被{{1}限制宽度（在你的例子中使用100％）。您可以在任意位置移动li。

现在您还必须更改jQuery事件，因为它们依赖于标记才能工作。您只需要更改前几行就可以了：

div

以下是它完成后的外观：example。