Adding dropdown menu to navigation bar

Evening,

Learning on the job, currently doing a new website for my family business.

How can I make this drop down navigation menu work on desktop/mobile? I don’t want it too fancy, same design as the main navigation itself, I have fiddled around trying to make it work like the actual toggle so when users click ‘Services’ it would toggle down but it is not working as expected.

Ideally on hover it should display the drop down links for desktop, and mobile it should require a touch for it to display.

HTML

<div class=”navigation-bar”>
<div class=”navigation-item”>
<div class=”logo”>
<a href=”index.html”>
<img src=”/assets/img/logo.jpg” alt=”Company Logo”>
</a>
</div>
<ul class=”navigation-bar-menu”>
<li class=”active”><a href=”index.html” class=”active”>Home</a></li>
<li><a href=”#”>Services <i class=”fa-thin fa-chevron-down”></i></a>

<ul class=”navigation-bar-dropdown”>
<li><a href=”#”>Managed Print Service</a></li>
<li><a href=”#”>Document Management</a></li>
<li><a href=”#”>Machine Finance Options</a></li>
<li><a href=”#”>Machine Repair & Support</a></li>
</ul>

</li>
<li><a href=”#”>Products <i class=”fa-thin fa-chevron-down”></i></a>
<ul class=”navigation-bar-dropdown”>
<li><a href=”#”>Machines</a></li>
<li><a href=”#”>Ricoh</a></li>
<li><a href=”#”>Lexmark</a></li>
<li><a href=”#”>Konica Minolta</a></li>
<li><a href=”#”>Software</a></li>
<li><a href=”#”>Kofax</a></li>
<li><a href=”#”>Papercut</a></li>
<li><a href=”#”>Filestar</a></li>
</ul>
</li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
<button class=”navigation-bar-toggle”>
<i class=”fa-light fa-bars”></i>
Menu
</button>
</div>
</div>

CSS

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: #242424;
font-family: ‘proxima-nova’, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 16px;
line-height: 1.5rem;
}

li {
list-style-type: none;
}

a {
text-decoration: none;
color: inherit;
}

.navigation-bar {
background-color: #ffffff;
padding: 2rem 1rem;
position: relative;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
width: 10rem;
display: block;
}

.navigation-bar-toggle {
padding: 1rem;
background-color: #ecf0f1;
color: inherit;
cursor: pointer;
text-transform: uppercase;
border: none;
font: inherit;
border-radius: 0.25rem;
}

.navigation-bar-dropdown {
display: flex;
flex-direction: column;
}

.navigation-bar-menu {
flex-direction: column;
right: 0;
overflow: hidden;
top: 100%;
background: #ecf0f1;
display: none;
position: absolute;
width: 100%;
}

.navigation-bar-menu .active {
background-color: #242424;
color: #ffffff;
font-weight: 300;
}

.navigation-bar-menu li {
display: flex;
justify-content: center;
padding: 1rem;
}

.navigation-bar-menu a {
text-transform: uppercase;
}

.navigation-bar a:hover {
opacity: 1 !important;
}

.navigation-bar-menu :not(.active):hover {
background-color: #242424;
color: #ffffff;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 500ms;
}

.navigation-bar-menu.open {
display: flex;
}

@media only screen and (min-width: 700px) {
/* NAVIGATION BAR */
.navigation-bar-toggle {
display: none;
}

.navigation-bar-menu {
display: flex;
flex-direction: row;
position: relative;
background: none;
justify-content: end;
width: auto;
gap: 1rem;
}

.navigation-bar-menu li {
background-color: #ecf0f1;
border-radius: 0.25rem;
padding: 1rem;
}
}

JS

window.addEventListener(‘DOMContentLoaded’, () => {
const menuToggler = document.querySelector(‘.navigation-bar-toggle’)
const menu = document.querySelector(‘.navigation-bar-menu’)

menuToggler.addEventListener(‘click’, () => {
menu.classList.toggle(‘open’)
})
})

Any help would be greatly appreciated.
https://jsfiddle.net/fc471p3e/4/