仅在菜单扩展时才需要下拉菜单下的内容（CSS）

Question

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

您可以在下面的扩展表单中看到此示例：

我想要实现的是当我点击菜单＆＃39;要折叠下拉列表，下面的内容应该会向上移动到菜单下方。

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

正如您所看到的，内容上方有一个空白，显然在小型显示器上效率很低。

展开的菜单项的样式默认为：

{
visibility: hidden;
}

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

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

任何建议都会有所帮助，

谢谢，

史蒂夫。

Answer 1

如果您使用

visibility: hidden;

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

如果您不想这样，请使用

display: none;

Answer 2

您可以尝试：

display:none;

可见性不会改变元素的大小。

Answer 3

DEMO

CSS：

*{margin:0;padding:0; box-sizing:border-box;}

section{
    width:200px;
    border:1px solid #ccc;
    transition: all 3s ease;
}

section menu, section article{
    display:block;
    width:100%;
    clear:both;
}
section{
    text-align: center;
}
article img{
    width:150px;
    height:150px;
    background:#333;
}
menu{
    height:0px;
    overflow:hidden;
}
menu li{
    list-style:none;
    padding:6px 2px;
    width:100%;
}
menu.active{
    height:auto;
}
button{cursor:pointer;}

HTML：

<section>
    <button>Click ME</button>
    <menu>
        <li>Users</li>
        <li>Gallery 1</li>
        <li>Gallery 2</li>
        <li>Apps</li>
    </menu>
    <h2>Users</h2>
    <article>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
    </article>
</section>

JS：

var clickMe = document.querySelector("button"),
    menu = document.querySelector("menu");
clickMe.addEventListener('click', function () {
    menu.classList.toggle("active");
});