Html 目标父嵌套元素

我正在尝试使用纯CSS创建一个下拉菜单。但是，我正在努力使用正确的选择器和父元素。我试图将

ul

定位在与

复选框

不同的div中。常见的父项是

.site header

，我需要使用

~

，但我尝试了大量的组合，但没有成功

标签{
光标：指针；
}
.站点导航切换#导航切换{
显示：无；
}
navbar先生{
显示：无；
}
.site导航切换#导航切换：选中~.navbar{
显示：块；
}

...

一,
二,
三,
四,

菜单

为什么不在

.navbar

前面加上

复选框

输入

然后您必须使用

#导航切换：选中+.navbar

标签{
光标：指针；
}
#导航开关{
显示：无；
}
navbar先生{
显示：无；
}
#导航切换：选中+导航栏{
显示：块；
}

...

一,
二,
三,
四,

菜单