Stylize dropdown

dropdown/dropdown.css

@@ -14,6 +14,7 @@ ul {
   align-items: stretch;
   position: absolute;
   top: 100%;
+  margin-top: 0.5em;
   z-index: 3;
   white-space: nowrap;
   background-color: var(--dropdown-background);
@@ -31,7 +32,7 @@ ul {
   padding: 0.5em;
 }
 
-.dropdown__trigger:hover {
+.dropdown__trigger:hover, .dropdown__trigger--active {
   background-color: var(--dropdown-background-highlight);
 }
 

dropdown/dropdown.html

@@ -43,6 +43,7 @@
   const handleDropdownMenus = (window) => {
     const dropdowns = document.getElementsByClassName('dropdown')
     const menus = document.getElementsByClassName('dropdown__menu')
+    const buttons = document.getElementsByClassName('dropdown__trigger')
 
     for (const d of dropdowns) {
       const button = d.querySelector('.dropdown__trigger')
@@ -51,6 +52,7 @@
       button.onclick = (e) => {
         e.stopPropagation()
         menu.classList.toggle('dropdown__menu--hidden')
+        button.classList.toggle('dropdown__trigger--active')
       }
     }
 
@@ -58,6 +60,9 @@
       for (const menu of menus) {
         menu.classList.add('dropdown__menu--hidden')
       }
+      for (const button of buttons) {
+        button.classList.remove('dropdown__trigger--active')
+      }
     }
   }
   handleDropdownMenus()