My dropdown menu is behaving strangely, opening and closing simultaneously when I click the nav link. I've been working on creating a dropdown menu, but it keeps closing on its own:
Whenever I try to open the dropdown, it closes by itself, and I'm having trouble identifying the issue. Here are the HTML, CSS, and JavaScript codes that I've used:
Check out this image for reference
let dropdownLinks = document.querySelector(".nav-linkdrp");
let drpdwnMenu = document.querySelector(".drpdwn-menu");
function drpdwnMenuFunc() {
drpdwnMenu.classList.toggle("drpdwn-menu-active");
}.navbar-nav {
display: flex;
gap: 2vw;
}
.nav-items {
list-style: none;
}
.drpdwn {
display: flex;
gap: 0.4vw;
align-items: center;
justify-content: center;
}
.drpdwn-menu {
display: none;
}
.drpdwn-menu-active {
z-index: 99;
display: flex;
position: absolute;
top: 100%;
flex-direction: column;
align-items: center;
background-color: white;
width: 10vw;
height: auto;
border: solid black 3px;
padding: 20px 20px;
}
.drpdwn-item {
list-style: none;
padding: 1vh 2vw 1vh 2vw;
}
.drpdwn-item a {
text-decoration: none;
font-weight: 500;
color: black;
}
.nav-links {
text-decoration: none;
color: black;
font-weight: 500;
font-size: 20px;
}<ul class="navbar-nav">
<li class="nav-items"><a href="" class="nav-links">HOME</a></li>
<li onclick="drpdwnMenuFunc()" class="nav-items drpdwn">
<a href="" class="nav-links nav-linkdrp">LEARN</a>
<i class="ri-arrow-down-s-fill"></i>
<ul class="drpdwn-menu">
<li class="drpdwn-item"><a href="">ABOUT</a></li>
<li class="drpdwn-item"><a href="">FAQ</a></li>
<li class="drpdwn-item"><a href="">BLOGS</a></li>
</ul>
</li>
<li class="nav-items drpdwn">
<a href="" class="nav-links">DISCOVER</a>
<i class="ri-arrow-down-s-fill"></i>
</li>
<li class="nav-items"><a href="" class="nav-links">CONTACT</a></li>
</ul>I had hoped for smooth functioning of my dropdown menu.