当下拉菜单按钮出现时，如何按下下面的<div>？
我在那个网站上工作只是为了学习 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>
</p>
</div>
</div>
</body>
</html>
这是我的代码： https://codepen.io/andy4117/pen/NWqzqxo
缥缈止盈1回答
-
潇潇雨雨
使用min-height而不是height用于您的#navigation造型。老的#navigation { ... height: 5em; ...}新的#navigation { ... min-height: 5em; ...}注意：此解决方案特定于您的情况。不同的标记可能需要不同的解决方案。
随时随地看视频慕课网APP
相关分类
Html5