带有复选框黑客的下拉菜单不起作用

Question

我试图在单击"菜单"单词时创建一个下拉菜单，但它不起作用。内容已经用display:none隐藏了，我用了:checked伪类什么的。欢迎任何帮助。提前感谢！

代码也可以在JSFiddle上检查：https://jsfiddle.net/pys0wLo3/

.HTML：

<div class="menu" style="text-align: center;">
<input type="checkbox" id="toggle">    
<label for="toggle">MENU ☰</label>
<ul>
<a href="#"><li>Página principal</li></a>
<a href="#"><li>Textos</li></a>
<ul>
<a href="#"><li>VAVEL Brasil</li></a>
<a href="#"><li>Doislances</li></a>
<a href="#"><li>Outros</li></a>
</ul>
<a href="sobre.html"><li>Sobre mim</li></a>
<a href="#"><li>Contato</li></a>
</ul>

.CSS：

.menu {
height:60px;
background-color:#272F38;
}
.menu label {
display:inline;
font-family: "Lato Bold";
font-size:16px;
color:#767676;
font-weight: bold;
cursor: pointer;
width:100%;
}
.menu input {
position: absolute;
left: -9999px;
}
.menu ul {
display:none
}
#toggle:checked ~ .menu ul {
display:block;
font-size:20px;
font-family:"Lato Bold";
font-weight: bold;
color:black;
}

Answer 1

在您的代码中，以下段的含义是

#toggle:checked ~ .menu ul {}

 

<input checked>
<tag class="menu">
<ul></ul> <!-- the above css will select this when you check the input -->
</tag>

我对你的小提琴做了一个小修改。请检查此内容。https://jsfiddle.net/cujslive/dy3pqcja/1/

Answer 2

#toggle：check ~ ul

#toggle 没有同级 .menu