下拉相对定位问题

Question

我有 3 个按钮，每个按钮都会触发自己的下拉内容 div。我需要下拉列表来跨越页面的整个宽度。我知道我可以将下拉菜单的位置更改为 :absolute 以实现全宽，但这会导致问题，因为它会将自身定位在页脚上方而不是将其向下推。

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

我在评论里设置了codepen

如有任何帮助，我们将不胜感激。

Answer 1

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

您必须将所有 .toggleContent div 移出 li，因为当您尝试使它们全宽时，它们会受到 li 的宽度（您在示例中使用的是 100%）。您可以将 div 移动到任何您喜欢的地方。

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

$("button.expand").click(function(e){
     e.preventDefault();
     $(this).toggleClass("active");
     $('.toggleContent').slideToggle('slow');
     return false;
});

这是全部完成后的样子：example。

下拉相对定位问题

Dropdown relative positioning issue

javascript

css

css-position

drop-down-menu