I looked all over online to find a solution to multiple drop down menus in a navigation header but most of the solutions I found in tutorials involved duplicating a Javascript function that targets the individual ID of the parent container for the drop down.

A couple issues I found with this:

• If each drop down has it's own function, then more than one drop down can be open at the same time.

• Clicking anywhere else on the page to close the drop down was tricky and confusing.

Now, I know this is super simple to implement with something like Alpine.js (which in all reality I'd probably use in the real world instead) but I wanted to make this work with Vanilla JS, so this was the solution I came up with.

If anyone has feedback I'd really appreciate it!