html - 仅当菜单展开时才需要将菜单下方的内容下推(CSS)

Question

这是我关于堆栈溢出的第一篇文章。我在开发响应式网站布局时遇到了一些困难。当我的浏览器窗口宽度小于 400 像素时，我的菜单将变为移动式设计。

您可以在下面的展开形式中看到这方面的示例:

我想要实现的是，当我单击“菜单”折叠下拉菜单时，下面的内容应该向上移动到菜单正下方。

另一张图片将有助于说明问题:

如您所见，内容上方有一个空白，这在小显示器上显然效率很低。

展开的菜单项默认样式如下:

{
visibility: hidden;
}

我认为这是问题的一部分，因为列表项在那里但只是隐藏但我不确定。

对于这个问题的基本性质，我深表歉意，因为我是一名学习者，现在才刚刚开始涉足高效的响应式设计。

任何建议都会有帮助，

谢谢，

史蒂夫。

Answer 1

如果你使用

visibility: hidden;

你只会隐藏元素，但它们仍然会在那里，占据空间。

如果你不想那样，使用

display: none;