带有复选框的CSS下拉菜单

我不是CSS方面的专家，而且我一辈子都不能选择显示div的选项。在我的头脑中，这应该是可行的，但事实并非如此。任何帮助都将不胜感激。我认为问题在于这行代码

.mobile-trigger:checked ~ .drop {
display: block;
}

---

默认情况下，您必须隐藏内容，一旦选中输入，

显示：block

将显示内容。请注意，general sibling combinator

~

“将两个选择器分开，并且仅当第二个元素前面有第一个元素时才与之匹配，并且两个元素共享一个共同的父元素”，因此必须显示的元素必须是复选框后面的同级元素

.drop{
显示：无；
}
.移动触发器：选中~.放下{
显示：块；
}

测试

谢谢您的回答。我遵循你的做法，从那里重新建造了它。我想我的错误是把输入放在div下面。