Javascript 响应导航菜单的问题

我的导航菜单有问题。。。它适用于台式机和笔记本电脑，但不适用于移动设备

有人能帮我吗

以下是台式机/笔记本电脑屏幕中菜单的代码：

@仅媒体屏幕和（最小宽度：768px）{
/*
/导航
*/
导航{
宽度：100%；
背景：#000；
边框底部：5px纯白；
位置：相对位置；
字体系列：“Decker”；
}
导航：之后{
内容：''；
高度：8px；
宽度：100%；
背景：继承；
位置：绝对位置；
底部：-15px；
左：0px；
z指数：1；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
导航a{
颜色：#fff；
文字装饰：无；
}
.导航猫{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
最大宽度：100%；
保证金：自动；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
垫底：.6em；
}
李国荣先生{
显示：内联块；
列表样式：无；
位置：相对位置；
填充：0.5em；
}
最后一个孩子a:以前{
显示：无；
}
.nav_uuuli:悬停>a{
背景：#b42024；
文字装饰：无；
颜色：#fff；
}
.nav____li:悬停>a:之后{
显示：块；
}
.nav\u li:悬停.sub\u类别{
能见度：可见；
不透明度：1；
}
.nav_uuli>a{
显示：内联块；
填充：25.6px 0.6em 0.7em 0.6em；
位置：相对位置；
字号：18px；
线高：1；
}
a:以前{
内容：“|”；
显示：块；
位置：绝对位置；
右：-10px；
顶部：25.6px；
-webkit转换：translateY（-4%）；
转化：translateY（-4%）；
行高：继承；
字体大小：继承；
}
a:之后{
显示：无；
内容：“；
位置：绝对位置；
底部：-25px；
左：0px；
宽度：100%；
高度：8px；
背景:#fac312；
z指数：2；
}
.sub__类别{
可见性：隐藏；
不透明度：0；
}
.sub__类别{
位置：绝对位置；
最高：100%；
左：0px；
最小宽度：160px；
宽度：100%；
z指数：3；
边缘：0.5em；
填充顶部：23px；
-webkit过渡：所有.12s线性；
过渡：全部为.12s线性；
}
李素华先生{
文本对齐：居中；
边框底部：2px#000实心；
背景：#b42024；
}
.sub__链接{
填充：.7em 1em；
显示：块；
字体大小：14px；
}
.sub__链接：悬停{
背景：#fff；
颜色：#000；
文字装饰：无；
}
导航李a{
背景：#b42024；
颜色：#fff；
文字装饰：无；
}
导航李a.激活：之后{
显示：块；
内容：“；
位置：绝对位置；
底部：-25px；
左：0px；
宽度：100%；
高度：8px；
背景:#fac312；
z指数：2；
}
，sub_uu_uli a.主动式-sub{
背景：#fff；
颜色：#000；
文字装饰：无；
}
}
输入#控制导航{
可见性：隐藏；
位置：绝对位置；
左：-9999px；
不透明度：0；
}

...
...
...

您需要在

500px

周围再添加一个断点。在这个转折点，调整你的CSS菜单。你没有任何媒体查询，目标是那些较小的设备。您将需要类似于

max width:420px

的内容。请更具体地说明您需要的帮助。到底是什么问题@MichaelCoker我不知道如何在它的父元素中插入子菜单。。。我已经设法使菜单工作，但是，我不能包括子菜单