Html 我的导航栏在最大宽度为480px的移动设备上没有响应

我有一个自定义的下拉导航栏，可以响应480像素以上的屏幕。我已经创建了一个隐藏的菜单图标，在480px以下，图标会显示出来，当它被点击时，导航栏应该会显示，包括下拉列表。在480像素以下，图标显示良好，但单击后，下拉列表不显示。我使用HTML5和CSS3

/*设置活动链接的背景色样式*/
.菜单ul.激活{
颜色：#ffffff；
背景：#红色；/*适用于不支持渐变的浏览器*/
背景：-webkit线性渐变（红色20%，绿色）；/*用于Safari 5.1至6.0*/
背景：-o-线性梯度（红色20%，绿色）；/*用于Opera 11.1至12.0*/
背景：-moz线性渐变（红色20%，绿色）；/*适用于Firefox 3.6至15*/
背景：线性渐变（红色20%，绿色）；/*标准语法*/
背景：线性渐变（红色20%，绿色）；/*标准语法*/
}
navbar先生{
宽度：100%；
最大宽度：1000px；
文本对齐：居中；
利润上限：-8px；
边缘底部：60px；
左边距：160像素；
}
.菜单ul{
/*移除子弹*/
列表样式：无；
}
/*为ul中的每个列表设置样式*/
李先生{
背景颜色：绿色；
边框：1px实心#ffffff；
宽度：100%；
最大宽度：173像素；
高度：35px；
线高：35px；
保证金：自动；
文本对齐：居中；
/*使列表以水平方式显示*/
浮动：左；
位置：相对位置；
边界半径：8px；
字体：15px；
字体大小：常规；
}
.菜单ul li a{
文字装饰：无；
颜色：白色；
显示：块；
}
.菜单ul li a：悬停{
背景色：红色；
边界半径：8px；
}
.菜单{
位置：绝对位置；
左边距：-40px；
显示：无；
}
.菜单ul li：悬停>ul{
显示：块；
}
.菜单{
宽度：100%；
左边距：134px；
顶部：0px；
}
/*在悬停时显示下拉列表*/
/*+selecctor设置紧跟在另一个元素之后的每个元素的样式*/
.菜单ul li a:悬停+.菜单ul li.菜单ul li:悬停{
显示：块；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
/*我们选择复选框，然后使用selector column checked来确保选中复选框*/
/*~选择左侧元素下方的所有内容，并在花括号内使用CSS样式设置样式*/
输入[类型=复选框]：选中~.列表{
显示：块；
}
/*根据菜单标签的类别设置其样式*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：480px）{
/*使下拉链接内联显示*/
.菜单ul{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李先生{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
.menu ul li、.menu li a{
宽度：100%；
}
.显示菜单{
显示：块；
}
身体{
背景图像：无；
}
}

菜单

主页

我认为这需要在菜单按钮上单击事件（JavaScript）。以下是我在JSFIDLE中编写的代码：。要运行该小提琴，首先选择页面的中间部分，将html页面（位于右下方）调整为移动设备的大小，然后单击左上角的“运行”，然后单击html中的大菜单按钮，以查看显示的导航栏链接的其余部分

此外，如果在显示菜单栏时再次单击该菜单栏，它将返回显示“无”

如果添加此脚本：

var menuBtn = document.querySelector(".show-menu");
var menu = document.querySelector(".menu ul");
menuBtn.onclick = function(){

if (menu.style.display == "none") { 
    menu.style.display = "block";
} else { 
    menu.style.display = "none";
}


}

然后单击菜单按钮，将显示导航栏的其余部分。您可以将此脚本添加到名为script.js的文件中，然后在html中，在正文的下半部分，将

"<script src="script.js"></script>" 

“”

整个问题在于您的

#show menu

复选框不起任何作用，因此您只需添加行即可

#显示菜单：选中~.navbar.menu ul{display:block；}

到你的CSS。然后点击大菜单按钮就可以了。不需要额外的JavaScript例程

提示：以整页模式运行代码段，以便使窗口足够窄

/*设置活动链接的背景色样式*/
.菜单ul.激活{
颜色：#ffffff；
背景：红色；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（红色20%，绿色）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性