到目前为止，我已经尝试使用以下代码：
CSS代码：
/*global*/
html,
body {
width: 100;
margin: 10;
padding: 10;
font-family: Avenir, sans-serif;
}
/*functions*/
.multi-level,
.item ul,
.nav input[type="checkbox"] {
display: none;
}
#menu:checked ~ .multi-level,
.item input:checked ~ ul {
display: block;
}
HTML:
<body>
<p style="font-family: 'Avenir'; text-align: center">
"What is this website about?" Info about select Macs and frequently asked
questions.
</p>
<div class="nav">
<input type="checkbox" id="menu" />
<label for="menu">☰</label>
</div>
<div class="multi-level">
<div class="item">
<input type="checkbox" id="A" />
<label for="A">Mac Mini</label>
<ul>
<li><a href="#">2005-2006 (PPC)</a></li>
<li><a href="#">2006-2010 (Polycarbonate Mini*)</a></li>
<li><a href="#">2010-2018 (Aluminium Mini*)</a></li>
<li><a href="#">2020-Present (M1 Mini)</a></li>
</ul>
</div>
</div>
</body>
由于某种原因，下拉菜单不起作用，我尝试添加visibility: visible;和visibility: show;似乎没有任何作用。
我试过使用Firefox和Safari，它们都不起作用，可能是浏览器相关的问题吗？
注意：我正在使用它们的最新版本。
您的问题是这个选择器没有选择任何东西：
#menu:checked ~ .multi-level {
display: block;
}
您的div.multi-level不是#menu的兄弟，而是.nav的兄弟。但是没有CSS父选择器，所以用纯CSS解决方案真正解决这个问题的唯一方法就是重构HTML。你可以去掉div.nav，也可以在label for="menu"之后将div.multi-level移到div.nav中，或者其他任何对你有用的东西。
或者，您可以使用JavaScript解决方案在一个或多个元素上切换类。