Javascript 有没有办法加上一句；悬停时的下拉菜单；在导航列表项上？

我有一个导航，我想在我的两个导航列表项（在左边的前两个）上添加一个下拉菜单（悬停）。最好的方法是什么？我尝试了谷歌的一些解决方案，但没有一个真正对我有效，它只是打乱了我的导航

以下是我的导航： （展开至整页以查看导航工作）

ulli{
列表样式：无；
}
html{
字体系列：“Roboto”，衬线；
}
.导航{
位置：固定；
宽度：100%；
文本对齐：居中；
字体大小：14px；
字体大小：0.875rem；
线高：1.5em；
高度：180像素；
字体系列：“Roboto”，衬线；
过渡：所有0.5s缓解；
显示器：flex；
证明内容：中心；
对齐项目：居中；
z指数：99999；
背景色：rgba（175,213,123,0.70）；
}
.导航ul{
显示器：flex；
弯曲方向：行；
保证金：0；
填充：0；
z指数：1；
}
李国宝先生{
浮动：左；
填充：0 20px；
文字装饰：无；
文本转换：大写；
颜色：#22222；
裕度：-12px 0；
字母间距：0.200em；
过渡：所有0.5s缓解；
}
.导航ul li:悬停{
颜色：#ffa947；
光标：指针；
}
@介质（最小宽度：0）和（最大宽度：770px）{
李国宝先生{
利润率：17px0；
}
}
.导航ul li.reg{
字体大小：10px；
字号：0.625rem；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航ul li.reg{
显示：无；
}
}
.导航ul li.标题{
字体大小：24px；
字体大小：1.5rem；
}
.导航h1{
字体大小：24px；
字体大小：1.5rem；
颜色：#22222；
字体大小：300；
z指数：1；
保证金：0；
填充：0；
字母间距：10px；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航{
弯曲方向：立柱；
高度：自动；
}
}
.navigation.sticky{
高度：55px；
背景色：rgba（175、213、123、1）；
}
.navigation.sticky:：after{
不透明度：1；
过滤器：α（不透明度=100）；
}
.navigation.ul.li{
保证金：0；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.navigation.sticky{
高度：自动；
}
.navigation.sticky.title{
利润率：17px0；
}
}
.导航.隐藏{
可见性：隐藏；
身高：0；
显示：无；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航.隐藏{
显示器：flex；
弯曲方向：立柱；
保证金：0；
填充：0；
浮动：左；
}
.导航.隐藏李{
保证金：0；
填充：10px0；
转换：所有0；
}
}
.导航.隐藏{
显示：无；
}
.navigation.switch.hidth{
显示：块；
}
.navigation.switch.unhid{
显示：无；
}
.navigation.hidden.showmenu{
可见性：隐藏；
身高：0；
显示：无；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.navigation.hidden.showmenu{
能见度：可见；
高度：自动；
显示：块；
}
.navigation.hidden.showmenu li{
宽度：100%；
浮动：左；
转换：所有0；
}
.navigation.hidden.showmenu li:最后一个孩子{
填充底部：30px；
}
}
.导航栏{
显示：无；
利润率：17px0；
字号：21px；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航栏{
显示：块；
}
}
.navigation.bar:悬停{
光标：指针；
}

ulli{
列表样式：无；
}
html{
字体系列：“Roboto”，衬线；
}
.导航{
位置：固定；
宽度：100%；
文本对齐：居中；
字体大小：14px；
字体大小：0.875rem；
线高：1.5em；
高度：180像素；
字体系列：“Roboto”，衬线；
过渡：所有0.5s缓解；
显示器：flex；
证明内容：中心；
对齐项目：居中；
z指数：99999；
背景色：rgba（175,213,123,0.70）；
}
.导航ul{
显示器：flex；
弯曲方向：行；
保证金：0；
填充：0；
z指数：1；
}
李国宝先生{
浮动：左；
填充：0 20px；
文字装饰：无；
文本转换：大写；
颜色：#22222；
裕度：-12px 0；
字母间距：0.200em；
过渡：所有0.5s缓解；
位置：相对位置；
}
.ul li a{
字号：0.625rem；
文字装饰：无；
颜色：#22222；
}
.导航ul li a:悬停{
颜色：#ffa947；
}
.导航ul li.子菜单{
显示：无；
位置：绝对位置；
顶部：15px；
左：0；
宽度：200px；
背景：#FFF；
边框：1px#e8e8e8实心；
}
.导航ul li:悬停.子菜单{
显示：块；
}
.导航ul li.子菜单li{
显示：内联块；
宽度：计算（100%-20px）；
保证金：0；
填充物：5px10px；
列表样式：无；
边框底部：1px#e8e8e8实心；
}
.导航ul li.子菜单li a{
颜色：#ffa947；
}
.导航ul li:悬停{
颜色：#ffa947；
光标：指针；
}
@介质（最小宽度：0）和（最大宽度：770px）{
李国宝先生{
利润率：17px0；
}
}
.导航ul li.reg{
字体大小：10px；
字号：0.625rem；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航ul li.reg{
显示：无；
}
}
.导航ul li.标题a{
字体大小：24px；
字体大小：1.5rem；
}
.导航h1{
字体大小：24px；
字体大小：1.5rem；
颜色：#22222；
字体大小：300；
z指数：1；
保证金：0；
填充：0；
字母间距：10px；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航{
弯曲方向：立柱；
高度：自动；
}
}
.navigation.sticky{
高度：55px；
背景色：rgba（175、213、123、1）；
}
.navigation.sticky:：after{
不透明度：1；
过滤器：α（不透明度=100）；
}
.navigation.ul.li{
保证金：0；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.navigation.sticky{
高度：自动；
}
.navigation.sticky.title{
利润率：17px0；
}
}
.导航.隐藏{
可见性：隐藏；
身高：0；
显示：无；
}
@介质（最小宽度：0）和（最大宽度：770px）{
.导航.隐藏{
显示器：flex；
弯曲方向：立柱；
保证金：