navbar js

wiki/menu.html

@@ -132,7 +132,7 @@
   </ul>
 </nav>
 <script>
-  var navbox = document.getElementById("navbox");
+var navbox = document.getElementById("navbox");
 let navbar = document.getElementById("my-navbar");
 let items = navbar.children;
 
@@ -142,10 +142,17 @@ for (let i = 0; i < items.length; i++) {
 
     // Check if the item has a dropdown (sub-menu)
     if (item.children.length > 1) {
+        // Click event to toggle the dropdown
         item.addEventListener('click', function (event) {
             toggleDropdown(item);
             event.stopPropagation(); // Prevent event bubbling
         });
+
+        // Mouseleave event to close the dropdown
+        let dropdownMenu = item.children[1];
+        dropdownMenu.addEventListener('mouseleave', function () {
+            closeDropdown(item);
+        });
     }
 }
 
@@ -183,12 +190,6 @@ function closeDropdown(el) {
     }
 }
 
-function resetColors() {
-    for (let i = 0; i < items.length; i++) {
-        items[i].children[0].style.color = "#185A4F";
-    }
-}
-
 function adjustNavHeight() {
     if (document.documentElement.clientWidth > 1400) {
         navbox.style.height = "320px";
@@ -199,6 +200,15 @@ function adjustNavHeight() {
     }
 }
 
+// Close dropdowns when clicking outside
+document.addEventListener('click', function () {
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].classList.contains('active')) {
+            closeDropdown(items[i]);
+        }
+    }
+});
+
 // Close dropdowns when clicking outside
 document.addEventListener('click', function () {
     for (let i = 0; i < items.length; i++) {