Javascript 如何在下拉导航栏下修复child 1的外观？

如何在

下拉菜单下修复child 1的外观？另外，将其更改为flexbox，并通过JavaScript制作一个按钮以减少代码混乱，这有多容易

我希望
#下拉列表
作为父导航栏项，而
#子导航栏项
作为该导航栏项的子导航栏项。没有大的空白条（请全屏运行代码查看）

另外，我希望在手机上可以看到酒吧。某些元素显示，但触点不显示


正文{
保证金：0；
字体系列：Helvetica，无衬线；
背景色：#F4；
}
a{
颜色：#000；
}
/*标题*/
.标题{
背景色：#fff；
盒影：1px1px4p0RGBA（0,0,0,1）；
位置：固定；
宽度：100%；
z指数：3；
}
.标题ul{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
背景色：#fff；
}
李安{
显示：块；
填充：20px 20px；
右边框：1px实心#F4；
文字装饰：无；
}
.头李a：悬停，
.标题.菜单btn:悬停{
背景色：#F4；
}
.标题.徽标{
显示：块；
浮动：左；
字号：2em；
填充：10px 20px；
文字装饰：无；
}
/*菜单*/
.标题.菜单{
明确：两者皆有；
最大高度：0；
过渡：最大高度。2秒放松；
}
/*菜单图标*/
.标题.菜单图标{
光标：指针；
显示：内联块；
浮动：对；
填充：28px 20px；
位置：相对位置；
用户选择：无；
}
.标题.菜单图标.导航图标{
背景：#333；
显示：块；
高度：2倍；
位置：相对位置；
过渡：背景。2放松；
宽度：18px；
}
.标题.菜单图标.导航图标：之前，
.标题.菜单图标.导航图标：之后{
背景：#333；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
过渡：所有。2放松；
宽度：100%；
}
.标题.菜单图标.导航图标：之前{
顶部：5px；
}
.标题.菜单图标.导航图标：之后{
顶部：-5px；
}
/*菜单btn*/
.标题.菜单btn{
显示：无；
}
.header.menu btn:选中~.menu{
最大高度：240px；
}
.header.menu btn:选中~.menu图标.navicon{
背景：透明；
}
.header.menu btn:选中~.菜单图标.navicon:之前{
变换：旋转（-45度）；
}
.header.menu btn:选中~.菜单图标.navicon:之后{
变换：旋转（45度）；
}
.header.menu btn:选中~。菜单图标：不（.steps）。navicon:之前，
.header.menu btn:选中~。菜单图标：不（.steps）。navicon:之后{
排名：0；
}
/*48em=768px*/
@介质（最小宽度：48em）{
李局长{
浮动：左；
}
李安{
填充：20px 30px；
}
.标题.菜单{
明确：无；
浮动：对；
最大高度：无；
}
.标题.菜单图标{
显示：无；
}
}











注意：
标记不使用也不需要结束斜杠，而且在HTML中从未使用过。在当前的HTML结构中，
#下拉列表
和
#子项
之间没有任何关系。它在以下CSS中使用。如果我可以用一个js@MI认为在一个
下有一个
会起作用。但事实并非如此。首先你自己尝试使用Javascript，如果你做不到，就来这里展示你的尝试。
#child
位于HTML结构中的
a href=“#dropDown”
之后，但它们之间没有直接关系。他们既不是兄弟姐妹，也不是父母子女。正如您所看到的，
#child
在
li
在
ul
中，ul是
a
的兄弟姐妹（而不是孩子）。您可以选择具有
a+ul li a
的子项注意：
标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。在您当前的HTML结构中，
#下拉列表
和
#子项
之间没有关系。它在以下CSS中使用。如果我可以用一个js@MI认为在一个
下有一个
会起作用。但事实并非如此。首先你自己尝试使用Javascript，如果你做不到，就来这里展示你的尝试。
#child
位于HTML结构中的
a href=“#dropDown”
之后，但它们之间没有直接关系。他们既不是兄弟姐妹，也不是父母子女。正如您所看到的，
#child
在
li
在
ul
中，ul是
a
的兄弟姐妹（而不是孩子）。您可以选择具有
a+ul li a