update dropdown

static/js/main.js

@@ -22,6 +22,47 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+  
+  // Desktop dropdown menu
+  const whyMenuButton = document.getElementById('why-menu-button');
+  const desktopWhyMenu = document.getElementById('desktop-why-menu');
+  
+  if (whyMenuButton && desktopWhyMenu) {
+    // Toggle on click
+    whyMenuButton.addEventListener('click', function() {
+      desktopWhyMenu.classList.toggle('hidden');
+    });
+    
+    // Close when clicking outside
+    document.addEventListener('click', function(event) {
+      if (!whyMenuButton.contains(event.target) && !desktopWhyMenu.contains(event.target)) {
+        desktopWhyMenu.classList.add('hidden');
+      }
+    });
+    
+    // Show on hover
+    whyMenuButton.addEventListener('mouseenter', function() {
+      desktopWhyMenu.classList.remove('hidden');
+    });
+    
+    // Container for both button and menu for hover functionality
+    const dropdownContainer = whyMenuButton.parentElement;
+    
+    // Hide on mouse leave from container
+    dropdownContainer.addEventListener('mouseleave', function() {
+      desktopWhyMenu.classList.add('hidden');
+    });
+  }
+  
+  // Mobile dropdown menu
+  const mobileWhyMenuButton = document.querySelector('[x-data="{ open: false }"] button');
+  const mobileWhyMenu = document.getElementById('mobile-why-menu');
+  
+  if (mobileWhyMenuButton && mobileWhyMenu) {
+    mobileWhyMenuButton.addEventListener('click', function() {
+      mobileWhyMenu.classList.toggle('hidden');
+    });
+  }
 
   // Theme toggle functionality
   const themeToggleBtn = document.getElementById('theme-toggle');