Javascript 点击手机上的菜单

我正在尝试在手机上点击以下菜单，但似乎无法使其正常工作。它可以在桌面上工作，但我不知道当我在手机上点击菜单图标时如何调整它才能工作。不确定这是否只能通过css实现，或者是否需要javascript

/*主体样式*/
身体{
边际：0px；
填充：0px；
字体系列：“开放式Sans”，无衬线；
背景色：#fff；
}
header.dark块引号{
颜色：#fff；
}
header.light blockquote{
颜色：#000；
}
大宗报价{
最大宽度：1000px；
保证金：0自动；
字体大小：16px；
左边框：0px；
填充：20px；
}
区块报价h2{
右边填充：40px；
边际：0px；
}
header.dark块引号a{
颜色：橙色；
文字装饰：下划线；
}
header.light block引用a{
文字装饰：下划线；
}
标题{
最小高度：450px；
}
标题：黑色{
背景色：#444；
}
头灯{
背景色：#fff；
}
/*导航样式*/
导航{
位置：相对位置；
}
标题：黑暗导航{
背景色：rgba（255、255、255、0.5）；
}
头灯导航{
背景色：rgba（0,0,0,0.5）；
}
主导航{
列表样式类型：无；
填充：0px；
字体大小：0px；
最大宽度：1000px；
保证金：0自动；
}
ul.main-nav>li{
显示：内联块；
填充：0；
}
ul.main-nav>li>a{
显示：块；
填充：20px 30px；
位置：相对位置；
颜色：#fff；
字体大小：16px；
字体大小：400；
框大小：边框框；
}
ul.main-nav>li:悬停{
背景色：#f9f9f9；
}
ul.main-nav>li:悬停>a{
颜色：#333；
字体大小：400；
}
ul.main-nav>li ul.sub-menu-list{
边际：0px；
填充：0px；
列表样式类型：无；
显示：块；
}
ul.main-nav>li ul.sub-menu-lists>li{
填充：2px0；
}
ul.main-nav>li ul.sub-menu-lists>li>a{
字体大小：14px；
}
.ic{
位置：固定；
光标：指针；
显示：内联块；
右：25px；
宽度：32px；
高度：24px；
文本对齐：居中；
顶部：0px；
大纲：无；
}
.ic.关闭{
不透明度：0；
字体大小：0px；
字体大小：300；
颜色：#fff；
顶部：8px；
高度：40px；
显示：块；
大纲：无；
}
/*设备的菜单图标*/
.ic.菜单{
顶部：25px；
z指数：20；
}
.ic.菜单.行{
高度：4px；
宽度：100%；
显示：块；
边缘底部：6px；
}
.ic.menu.line最后一个孩子{
边缘底部：0px；
}
.子菜单头{
利润率：10px0；
}
.横幅区{
边缘顶部：20px；
填充顶部：15px；
}
@仅介质屏幕和（最大宽度：768px）{
.子菜单头{
颜色：橙色；
}
.ic.菜单{
显示：块；
}
header.dark.ic.menu.line{
背景色：#fff；
}
标题.灯.ic.菜单.行{
背景色：#000；
}
.ic.菜单.行{
-webkit转换：所有0.4s易用0；
-o型过渡：所有0.4s到0；
转换：所有0.4s到0；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
-webkit变换原点：中心；
-ms变换原点：中心；
变换原点：中心；
}
.ic.菜单：焦点.行{
背景色：#fff！重要；
}
.ic.菜单：焦点。行：第n个子项（1）{
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
.ic.菜单：焦点。行：第n个子项（2）{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
变换：旋转（-45度）；
利润上限：-10px；
}
.ic.菜单：焦点。行：第n个子项（3）{
转换：translateY（15px）；
不透明度：0；
}
.ic.菜单：焦点{
大纲：无；
}
.ic.菜单：焦点~.ic.关闭{
不透明度：1；
z指数：21；
大纲：无；
}
/*
.ic.menu:focus~.ic.close{opacity:1.0；z-index:21；}
.ic.close:focus{opacity:0；}
*/
.ic.菜单：焦点{
不透明度：1；
}
导航{
背景色：透明；
}
/*手持设备的主菜单*/
主导航{
z指数：2；
填充：50px0；
位置：固定；
右：0px；
顶部：0px；
宽度：0px；
背景色：rgba（0,0,0,1）；
身高：100%；
溢出：自动；
/*已应用CSS动画：从右侧滑动*/
-webkit转换属性：背景、宽度；
-moz过渡属性：背景、宽度；
-o-过渡性质：背景、宽度；
过渡属性：背景、宽度；
-webkit转换持续时间：0.6s；
-moz转换持续时间：0.6s；
-o-过渡持续时间：0.6s；
过渡时间：0.6s；
}
.ic.菜单：焦点~.主导航{
宽度：300px；
背景色：rgba（0,0,0,1）；
}
ul.main-nav>*{
-webkit转换属性：不透明度；
-moz过渡特性：不透明度；
-o-过渡性质：不透明度；
过渡特性：不透明度；
-webkit转换持续时间：0.4s；
-moz转换持续时间：0.4s；
-o-过渡时间：0.4s；
过渡时间：0.4s；
不透明度：0；
}
.ic.菜单：焦点~.main导航>*{
不透明度：1；
}
ul.main-nav>li>a：之后{
显示：无；
}
ul.main-nav>li：第一个孩子{
边界半径：0px；
}
ul.main-nav>li{
显示：块；
边框底部：1px实心#444；
}
ul.main-nav>li>a{
字号：600；
}
ul.main-nav>li ul.sub-menu-list>li a{
颜色：#eee；
字体大小：14px；
}
.子菜单头{
字体大小：16px；
}
ul.main-nav>li:悬停{
背景色：透明；
}
ul.main-nav>li:悬停>a{
颜色：#fff；
文字装饰：无；
字号：600；
}
.ic.菜单：焦点~ul.main-nav>li>div.sub-menu-block{
左边框：0px实心#ccc；
右边框：0px实心#ccc；
边框底部：0px实心#ccc；
位置：相对位置；
能见度：可见；
不透明度：1.0；
}
.子菜单块{
填充：0 30px；
}
.横幅区{
垫底：0px；
}
.横额分区{
边缘底部：15px；
}
.横幅区{