我需要帮助与开始或如何启动我的下拉菜单使用flexbox与代码我已经。我已经从我看过的一个教程开始了普通的导航栏，但是教程中没有下拉菜单，所以我自己加了一个。
null
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbarLinks')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
}).navBar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #91CEC9;
color: #FFF;
}
.navbarLinks ul{
margin: 0;
padding: 0;
display: flex;
}
.navbarLinks li{
list-style: none;
}
.navbarLinks li a{
text-decoration: none;
color: #FFF;
padding: 42px;
display: block;
font-size: 20px;
}
.navbarLinks li a:hover{
background-color: #163640;
}<nav class="navBar">
<div class="logo">
<!--Jackie Gray-->
<img src="images/Logo2.png" alt="jgray logo">
</div>
<a href="#" class="toggleButton">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbarLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Digital Portrait</a></li>
<li><a href="#">Illustrations</a></li>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>null
当屏幕尺寸低于1400px时，这个额外的CSS代码将创建一个移动切换按钮汉堡。您还需要为mobile nav菜单添加html代码和css，以及几行javascript来使切换工作。
null
.navBar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #91CEC9;
color: #FFF;
}
.navbarLinks ul{
margin: 0;
padding: 0;
display: flex;
}
.navbarLinks li{
list-style: none;
}
.navbarLinks li a{
text-decoration: none;
color: #FFF;
padding: 42px;
display: block;
font-size: 20px;
}
.navbarLinks li a:hover{
background-color: #163640;
}
#nav-icon3{width:40px;height:45px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;position:absolute;top:25px;right:25px;}
#nav-icon3 span{display:block;position:absolute;height:5.5px;width:100%;background:#000;border-radius:7px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
#nav-icon3 span:nth-child(1){top:0px;}
#nav-icon3 span:nth-child(2){top:12px;}
#nav-icon3 span:nth-child(2){width:50%!important;}
@media screen and (min-width:1379px){
#nav-icon3{display:none;}
}
@media screen and (max-width:1390px){
#nav-icon3{
display:block!important;}
.navbarLinks {display:none;}
}
.logo img {
height:50px;width:50px;
}<nav class="navBar">
<div class="logo">
<!--Jackie Gray-->
<img src="https://global-uploads.webflow.com/5e157547d6f791d34ea4e2bf/5e17558f848f82e664c09d67_logo-dark.svg" alt="jgray logo">
</div>
<a href="#" id="nav-icon3">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbarLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Digital Portrait</a></li>
<li><a href="#">Illustrations</a></li>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>