如何在出现下拉菜单按钮时按下下面的<div>？

Question

我在那个网站上工作只是为了学习 HTML 和 CSS，首先没有 JS。所以这就是为什么我在这里寻找没有 JS 的解决方案。

当页面宽度小于 1081 像素时，顶部的菜单按钮将变为汉堡菜单。如果单击菜单按钮，导航栏下方会弹出 - 但是 - 不幸的是，按钮位于下方框的顶部，我想在单击汉堡菜单时将其向下推。有人可以提示我该怎么做吗？没有jscript，我在网上找不到任何解决方案。

HTML:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Rakete</title>
    </head>

    <body>
        <nav>
            <div id="navigation">
                <div class="wrapper">
                    <div id="logo"></div>
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle"/>
                    <div id="menu">
                        <a href="#">Home</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact</a>
                        <a href="#">Imprint</a>
                    </div>            
                </div>
            </div>
        </nav>

        <div id="main">
            <div class="wrapper">
               <div id="top-boxes">
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
               </div>

            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            </p>
         </div>
        </div>
    </body>
</html>

CSS:

*
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wrapper
{
    margin: 0 auto;
    width: 70%;
}

/* Navigation */

#navigation
{
    width: 100%;
    height: 5em;
    line-height: 5em;
    background-color: darkgrey;
    top: 0;

}



#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
    float: left;
}

/* ### Menu ### */


#menu
{   
     text-align: right;
     width: 100%;


}

#menu a
{
    margin: 0 1em;
    line-height: 5em;
    clear: right;
    color: black;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 100;
}


label 
{
    margin: 1em;
    font-size: 1.5em;
    line-height: 1.25em;
    display: none;
    width: 1em;
    float: right;
}

#toggle 
{
    display: none;
}


@media only screen and (max-width: 1081px) 

{
    label 
    {
        display: block;
        cursor: pointer;
    }
    #menu 
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    #menu a 
    {
        display: block;
        border-bottom: 1px solid black;
        margin: 0;

    }
    #toggle:checked + #menu 
    {
        display: block;
    }    
}

/* Content */

#main p
{
    margin: auto;
    margin-top: 2em; 
    clear: both;
}

#top-boxes
{
    text-align: center;

     display: inline-block;
}

.box
{
    width: 10em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    margin-top: 3em;
    border: solid black 2px;
    box-sizing: border-box;
    background-color: gray;
    display: inline-block;

}

这是我的代码： https://codepen.io/andy4117/pen/NWqzqxo

提前致谢！

Answer 1

为您的 #navigation 样式使用 min-height 而不是 height。

旧

#navigation {
    ...
    height: 5em;
    ...
}

新建

#navigation {
    ...
    min-height: 5em;
    ...
}

注意：此解决方案特定于您的情况。不同的标记可能需要不同的解决方案。

如何在出现下拉菜单按钮时按下下面的<div>？

How to push down the <div> below when dropdown menu buttons are appearing?

html

css

dropdown