CSS：选中的选择器不起作用

Question

我试图获得仅使用CSS的汉堡菜单。

问题是我检查的功能无法按预期运行，并且我无法弄清楚出了什么问题。

汉堡菜单的起始像素为1000px。

我使用带复选框的输入在打开和关闭之间进行切换。

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

.menu a {
  font-size: 22px;
}

#toggle {
  display: none;
}

.menu {
  text-align: center;
  width: 100%;
  display: none;
}

#toggle {
  display: block;
}

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

<a herf="#">
  <input type="checkbox" id="toggle">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Resources</a>
    <a href="#">Monthly</a>
    <a href="#">Terms</a>
    <a href="#">Privacy</a>
  </div>
</a>

Answer 1

您已将其中的某些元素包装在格式错误的链接（herf？）中。...HTML不允许这样做

See this Q&A

在input之后，浏览器似乎正在自动关闭链接包装程序，这意味着:checked +选择器失败。

删除链接或将其更改为无害的内容，例如div。

nav .menu a {
  text-decoration: none;
  color: white;
  font-weight: 700;
  padding: 0 1% 0 1%;
}

.menu a {
  font-size: 22px;
}

#toggle {
  display: none;
}

.menu {
  text-align: center;
  width: 100%;
  display: none;
}

nav .menu a {
  display: block;
  color: #2b9dff;
  background-color: white;
  border-bottom: 1px solid #2b9dff;
  margin: 0;
}

#toggle {
  display: block;
}

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

<input type="checkbox" id="toggle">
<div class="menu">
  <a href="#">Home</a>
  <a href="#">Resources</a>
  <a href="#">Monthly</a>
  <a href="#">Terms</a>
  <a href="#">Privacy</a>
</div>