我在媒体查询下有这些导航设置（最大宽度：767px）。我正在使用复选框输入来在选中时显示导航。这可行，但导航中的 ul 以及所有 li 项目不会显示。当检查输入时，显示设置为 ul 的“none”和“block”。请在此处查看 codepen 上的代码：mobile-dropdown
当我检查开发工具时，ul仍然设置为display: none; 即使检查了输入，也不应该发生这种情况。但显然我错过了一些东西。 当检查输入时导航会下降，但 ul 仍处于显示状态：无；因为某些原因。下面是主要代码。 codepen 链接上有更多内容，可能可以更好地确定问题。
<body>
<header>
<!-- Logo -->
<p class="main-logo">STARTUP GROUP</p>
<!-- Hamburger icon -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- Site Navigation -->
<nav>
<ul id="nav-items">
<li><a href="#">COMPANIES</a></li>
<li><a href="#">CITY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">JOBS</a></li>
</ul>
</nav>
</header>
</body>
@media (max-width: 767px) {
header {
position: fixed;
top: 0;
width: 100%;
padding: 2.875em 0.5em;
}
nav {
width: 100%;
height: 100%;
position: fixed;
background-color: beige;
overflow: hidden;
}
#nav-items a {
display: block;
padding: 30px;
color: black;
border-top: 1px solid black;
}
#nav-items a:active {
text-decoration: underline;
}
nav {
max-height: 0;
transition: max-height .3s ease-out;
}
label {
display: inline-block;
color: black;
font-style: normal;
font-size: 1.5em;
cursor: pointer;
}
#nav-items,
#hamburger {
display: none;
}
#hamburger:checked ~ nav {
max-height: 100%;
}
#hamburger:checked ~ #nav-items {
display: block;
}
}
好的解决了。波形符 ~ 仅适用于同级元素，这就是 #hamburger:checked ~ nav {...} 有效的原因。他们是兄弟姐妹。因此，为了定位导航中的 ul，下一行更改为：#hamburger:checked ~ nav #nav-items {...}。