如何在JavaScript上创建下拉菜单？

请帮助我实现列表中的下拉菜单。现在，为了练习，我使用Bootstrap 4库创建了一个站点，当单击任何按钮时，我遇到了这样的问题，列表仅从第一个按钮出现，但是当您单击任何按钮时，嵌套列表将退出是必要的。谢谢

let getList=document.querySelectorAll（'.sideBtn'）；
for（让我们看一看getList）{
控制台日志（a）；
a、 addEventListener（“单击”，显示列表）；
}
函数显示列表（）{
让getHide=document.querySelector（'.hide'）；
console.log（getHide）；
for（设i=0；i<1；i++）{
如果（getHide.style.display=='block'）{
getHide.style.display='none'；
}否则{
getHide.style.display='block'；
}
}
}
/*对于（让b的getHide）{
控制台日志（b）；
如果（b.style.display==“无”）{
b、 style.display='block'；
}否则{
b、 style.display='none'；
}
}*/

*{
保证金：0；
填充：0；
文字装饰：无；
}
.侧边栏{
位置：固定；
宽度：250px；
身高：100%；
背景：#042331；
过渡：所有。5s轻松；
}
.侧边栏{
列表样式类型：无；
}
.侧边栏ul li a{
显示：块；
身高：100%；
宽度：100%；
线高：60px；
字体大小：20px；
颜色：白色；
左侧填充：40px；
框大小：边框框；
边框底部：1px纯黑；
边框顶部：1px实心rgba（255255.1）；
过渡：.4s；
文字装饰：无；
}
ul li：悬停a{
左侧填充：50px；
}
.侧栏ul a i{
右边距：16px；
}
.隐藏{
显示：无；
}

你好，世界！