css - CSS :checked 选择器不起作用

Question

我试图让汉堡菜单只使用 css。

问题是我的检查功能没有按预期工作，我无法弄清楚我做错了什么。

汉堡菜单从 1000 像素开始。

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

#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>

标签： css

Answer 1

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

查看此问答

浏览器似乎在紧随其后自动关闭链接包装器，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>