出现下拉菜单按钮时如何在下面按下
？
]
我正在该网站上工作，只是为了学习HTML和CSS，而没有JS。因此，这就是我在这里寻找不带JS的解决方案的原因。
当页面宽度小于1081px时，顶部的菜单按钮将成为汉堡菜单。如果单击该菜单按钮，则在导航栏下方弹出-但是-不幸的是，这些按钮位于下面的框的顶部，单击汉堡菜单时，我想按下这些按钮。有人可以给我提示该怎么做吗？没有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">☰</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
提前感谢！
我正在该网站上工作，只是为了学习HTML和CSS，而没有JS。这就是为什么我在这里寻找不带JS的解决方案的原因。当页面宽度小于1081px时，...