update dropdown

static/css/dropdown.css

@@ -0,0 +1,43 @@
+/* Dropdown menu styles */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  border-radius: 0.375rem;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Dark mode styles */
+html.dark .dropdown-content {
+  background-color: #374151;
+}
+
+html.dark .dropdown-content a {
+  color: #f9fafb;
+}
+
+html.dark .dropdown-content a:hover {
+  background-color: #4b5563;
+}

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');