纯HTML和CSS汉堡菜单不起作用

我现在正在用html和css（没有js）和：checked+制作一个汉堡菜单。有些东西不起作用。我正在寻找解决方案大约3个小时，但我找不到任何解决方案。如果你能帮助我，那就太好了。 也许我在某个地方搞砸了，因为我是通过视频看的，但我做了和他完全一样的事情，但我没有工作：( 代码如下：

*{
保证金：0；
填充：0；
}
身体{
背景色：青色；
}
.航行{
右：0；
z指数：10；
显示：块；
位置：固定；
顶部：15px；
垫底：20px；
左侧填充：25px；
右侧填充：150px；
边界半径：50px 10px 10px 50px；
背景：rgba（0,0,0,0.5）；
}
.导航科{
显示：内联块；
字体大小：25px；
}
.航行a{
文字装饰：无；
颜色：白色；
}
.汉堡{
z指数：100；
位置：固定；
右：25px；
显示：块；
顶部：25px；
光标：指针；
}
.汉堡部{
宽度：45px；
高度：5px；
背景色：白色；
利润率：12像素；
边界半径：10px；
}
#拨动{
显示：无；
位置：固定；
}
#切换：选中+导航{
显示：无；
}

---

看起来您实际上缺少了checkbox元素。由于您使用的是，（

\toggle:checked+.navigations

）中的（

++

）复选框应与

.navigations

div一起放在

\toggle

输入之前

*{
保证金：0；
填充：0；
}
身体{
背景色：青色；
}
.航行{
右：0；
z指数：10；
显示：块；
位置：固定；
顶部：15px；
垫底：20px；
左侧填充：25px；
右侧填充：150px；
边界半径：50px 10px 10px 50px；
背景：rgba（0,0,0,0.5）；
}
.导航科{
显示：内联块；
字体大小：25px；
}
.航行a{
文字装饰：无；
颜色：白色；
}
.汉堡{
z指数：100；
位置：固定；
右：25px；
显示：块；
顶部：25px；
光标：指针；
}
.汉堡部{
宽度：45px；
高度：5px；
背景色：白色；
利润率：12像素；
边界半径：10px；
}
#拨动{
显示：无；
位置：固定；
}
/*
由于.navigations是#toggle之后的下一个同级元素，
+选择器在这里工作
*/
#切换：选中+导航{
显示：无；
}

你能添加工作片段代码吗？这样就可以很好地解决问题了。我创建了一个与另一个类似的站点，但它也不起作用，在这里，你已经从你的示例中删除了

输入

。此外，

+

是。你的

#toggle

元素需要直接位于HTML中的

导航

元素之前工作。