Html 屏幕外导航-右侧和左侧-仅限css

我正在尝试创建一个只使用css的左右屏幕导航抽屉，但在让每一面都正常工作时遇到了问题

我使用复选框作为按钮，如下所示：

<input type="checkbox" id="toggle-right">
<input type="checkbox" id="toggle-left">

<input type="checkbox" id="toggle-left">
<input type="checkbox" id="toggle-right">

如果我在顶部有右边的开关，那么右边的抽屉会打开，但左边不会

如果我像这样颠倒顺序：

<input type="checkbox" id="toggle-right">
<input type="checkbox" id="toggle-left">

<input type="checkbox" id="toggle-left">
<input type="checkbox" id="toggle-right">

向左切换将起作用，但不能向右切换

我做了一个实验来告诉你我的意思

如果有人有时间看一看并帮我解决这个问题，我将不胜感激

---

查看时，颠倒复选框的顺序切换以查看我在说什么。

问题在于使用

+

-相邻同级选择器。因为它只对复选框的下一个元素有效，所以它只对其中一个元素有效。解决方案是使用

~

-通用同级选择器

标题{
宽度：100%；
高度：90px；
背景色：#f1f1；}
.菜单切换{
文字装饰：无；
文本对齐：居中；
宽度：44px；
高度：44px；
字体大小：30px；
颜色：rgba（0,0,0,0.5）；
-webkit过渡：所有0.15秒都减少0秒；
-moz转换：所有0.15秒都会减少0秒；
过渡：所有0.15秒都减少0秒；
位置：绝对位置；
顶部：0px；
右：自动；
底部：0；
左：20px；
z-索引：2；}
.菜单切换：悬停{
颜色：#000000；}
#向左切换{
显示：无；}
#向左切换：选中~换页导航菜单{
左：0px；}
#向左切换：选中~。换页。菜单切换{
左：220px；}
.配置文件切换{
文字装饰：无；
文本对齐：居中；
宽度：44px；
高度：44px；
字体大小：30px；
颜色：rgba（0,0,0,0.5）；
-webkit过渡：所有0.15秒都减少0秒；
-moz转换：所有0.15秒都会减少0秒；
过渡：所有0.15秒都减少0秒；
位置：绝对位置；
顶部：0px；
右：40px；
底部：0；
左：自动；
z-索引：2；}
.配置文件切换：悬停{
颜色：#000000；}
#向右切换{
显示：无；}
#向右切换：选中+换页导航配置文件{
右：0px；}
#向右切换：选中+换页.配置文件切换{
右：220px；}
导航菜单{
位置：固定；
顶部：0px；
右：自动；
底部：0px；
左：-270px；
-webkit过渡：所有0.15秒都减少0秒；
-moz转换：所有0.15秒都会减少0秒；
过渡：所有0.15秒都减少0秒；
高度：自动；
宽度：200px；
背景:#111111；
z-索引：2000；}
导航剖面{
位置：固定；
顶部：0px；
右：-270px；
底部：0px；
左：自动；
-webkit过渡：所有0.15秒都减少0秒；
-moz转换：所有0.15秒都会减少0秒；
过渡：所有0.15秒都减少0秒；
高度：自动；
宽度：200px；
背景：99万；
z索引：2000；}

☰
+

我不知道还有其他选择器。谢谢你解决了这个问题，教了我一些新东西。