Help with my javascript navigation for clickable dropdowns in a nav.
> There are multiple dropdown divs in this nav.
> Clickable compared to displayed css for mobile friendly use.

Can't seem to find a way to get this to work

<nav>
<div class="dropdown">
<button class="dropmain">DROPDOWN <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-links">
<a href="/link1">Link One</a>
<a href="/link2">Link Two</a>
<a href="/link3">Link Three</a>
</div> <!-- .dropdown-links -->
</div> <!-- SERVICES .dropdown -->
</nav>

<script>
document.querySelectorAll("nav .dropdown .dropmain").addEventListener("click", function() {
var innerDiv = document.querySelectorAll("nav .dropdown:hover .dropdown-links");
if (innerDiv.style.display === "none") { innerDiv.style.display = "block";
}
});
</script>

.dropdown-links is a child of .dropdown, if you click on the links it'll propagate back up and cause it to toggle

Add the listener to .dropmain only or use the children selector ("nav > .dropdown > .dropmain")