Having trouble displaying dropdowns in javascript

I want to be able to display a dropdown list whenever I click on dropdown but it does not seem to be working. When I use my browser developer tools. It shows the class active is being added to dropdown list yet it does not display. Here is my html, css and javascript code.

HTML:

<nav>
        <ul id="menu">
            <li><a href="#">Home</a></li>

            <li>
                <a href="#" class="dropdown">About Us</a>

                <div class="dropdown-list">
                    <a href="#">Who We Are</a>
                    <a href="#">What We Do</a>
                    <a href="#">Our Policies</a>
                    <a href="#">FAQ</a>
            </li>
            <li>
                <a href="#" class="dropdown">Services</a>

                <div class="dropdown-list">
                    <a href="#">IT Consultancy</a>
                    <a href="#">Sofware Development</a>
                    <a href="#">Website Designing</a>
                    <a href="#">Graphics and Game Design</a>
                    <a href="#">Research</a>
                </div>
            </li>

            <li><a href="#">Team</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>

css:

:root{
    --font: 'Poppins', sans-serif;
    --primary-color: rgb(4, 228, 202);
    --dark: rgb(0, 24, 21);
    --faint:rgb(215, 255, 250);
    --grayish: rgb(155, 171, 169);
    --neutral-light: #fff;
    --neutral-dark: #000;
}
body{
    font-family: var(--font);
}
a{
    text-decoration: none;
    color: inherit;
}
nav{
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul{
    list-style: none;
}
nav ul li{
    display: inline-block;
    padding: 1rem;
    margin: 0;
}
nav ul li a{
    display: inline;
    color: var(--neutral-light);
    transition: 0.3s ease-in;
}
nav ul li a:hover{
    color: var(--primary-color);
}
nav ul li .dropdown{
    position: relative;
}
nav ul li .dropdown-list{
    position: absolute;
    box-shadow: 2px 2px 20px 10px rgba(0,0,0,0.3);
    background-color: var(--neutral-light);
    z-index: 1;
    display: none;
}
nav ul li .dropdown-list a{
    display: inline-block;
    padding: .5rem 1rem;
    color: var(--dark);
    transition: 0.3s ease-in;
}
.active{
    display: block;
}

Javascript:

const dropdown = document.querySelectorAll(".dropdown");

dropdown.forEach(dropdown => {    
    dropdown.addEventListener('click', ()=>{
        const dropdownList = dropdown.nextElementSibling;
        dropdownList.classList.toggle('active');
    });
});

If I try to add the class dropdown to the li tag, the code works but if I add the dropdown class to the a tag inside the li tag it fails. What could be the problem with my code?