navbar fiz second attempt

static/navbar.css

@@ -90,31 +90,32 @@ body{
     opacity: 0;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
 }
-.my-navbar > li:hover .son {
-    visibility: visible;
-    opacity: 1;
-}
 .my-navbar > li {
     float: left;
     width: 120px;
     height: 110%;
     margin-right: 25px;
-    position: relative; /* Add this to position the dropdown relative to the parent */
+    position: relative; /* Keep this to position dropdowns relative to their parent */
 }
 
 .my-navbar > li .son {
-    margin-top: 0; /* Remove any margin */
-    padding: 0; /* Remove any padding */
-    position: absolute; /* Position it absolutely */
-    top: 100%; /* Position it directly below the parent li */
-    left: 0; /* Align it directly under the parent */
-    width: 100%; /* Make sure it is the same width as the parent */
-    background-color: #C6EBE8; /* Make sure the background matches the navbar */
-    z-index: 1000; /* Ensure it appears above other content */
+    margin-top: 0; /* Remove any margin to avoid indentation */
+    padding: 0; /* Remove padding if not needed */
+    position: absolute; /* Position absolutely */
+    top: 100%; /* Align the dropdown directly below the parent */
+    left: 0; /* Align to the left edge of the parent */
+    width: 100%; /* Make sure the dropdown is as wide as the parent */
+    background-color: #C6EBE8; /* Match the background to the navbar */
+    z-index: 1000; /* Ensure it appears above other elements */
+    display: none; /* Hide the dropdown initially */
+    opacity: 0; /* Start with an invisible dropdown */
+    transition: opacity 0.3s ease-out; /* Smooth transition for visibility */
 }
 
-.my-navbar > li .son li {
-    width: 100%; /* Ensure the dropdown items take full width */
+.my-navbar > li:hover .son,
+.my-navbar > li.active .son {
+    display: block; /* Show dropdown on hover or when active */
+    opacity: 1; /* Make it visible */
 }
 
 /* Adjust for smaller screens */

wiki/menu.html

@@ -132,87 +132,121 @@
   </ul>
 </nav>
 <script>
-  var navbox = document.getElementById("navbox");
-  let navbar = document.getElementById("my-navbar");
-  let items = navbar.children;
-  function over(el){
-      for (i = 0; i < 4; i++){
-          items[i].children[0].style.color = "#185A4F";
-      }
-      el.children[0].style.color = "#62D881";
-      if (el.children.length > 1){
-        let son = el.children[1];
-        if (getComputedStyle(son,null)["display"]=="none"){
-          setTimeout(function(){
-              son.style.opacity = 1;
-          }, 1);
-          son.style.display = "block";
+  // var navbox = document.getElementById("navbox");
+  // let navbar = document.getElementById("my-navbar");
+  // let items = navbar.children;
+  // function over(el){
+  //     for (i = 0; i < 4; i++){
+  //         items[i].children[0].style.color = "#185A4F";
+  //     }
+  //     el.children[0].style.color = "#62D881";
+  //     if (el.children.length > 1){
+  //       let son = el.children[1];
+  //       if (getComputedStyle(son,null)["display"]=="none"){
+  //         setTimeout(function(){
+  //             son.style.opacity = 1;
+  //         }, 1);
+  //         son.style.display = "block";
+  //       }
+  //       if (document.documentElement.clientWidth > 1400){
+  //         navbox.style.height = "320px";
+  //       }
+  //       else if (document.documentElement.clientHeight < 1120){
+  //         navbox.style.height = "245px";
+  //       }
+  //       else{
+  //         navbox.style.height = "280px";
+  //       }
+  //     }
+  // }
+  // function leave(el){
+  //     for (i = 0; i < 4; i++){
+  //         items[i].children[0].style.color = "#185A4F";
+  //     }
+  //     if (el.children.length > 1){
+  //       let son = el.children[1];
+  //       if (getComputedStyle(son,null)["display"]=="block"){
+  //           son.style.opacity = 0;
+  //           setTimeout(function(){
+  //               son.style.display = "none";
+  //           }, 350);
+  //       }
+  //       navbox.style.height = "78px";
+  //     } 
+  // }
+let navbox = document.getElementById("navbox");
+let navbar = document.getElementById("my-navbar");
+let items = navbar.children;
+
+function over(el) {
+    resetColors();
+    el.children[0].style.color = "#62D881";
+    
+    // Close any open dropdowns except the current one
+    for (let i = 0; i < items.length; i++) {
+        if (items[i] !== el) {
+            closeDropdown(items[i]);
         }
-        if (document.documentElement.clientWidth > 1400){
-          navbox.style.height = "320px";
+    }
+    
+    // Show the current dropdown
+    let son = el.children[1];
+    if (son) {
+        son.style.display = "block";
+        son.style.opacity = 1;
+        el.classList.add('active');
+        adjustNavHeight();
+    }
+}
+
+function leave(el) {
+    // Do nothing here, as the dropdown should stay open
+}
+
+function closeDropdown(el) {
+    let son = el.children[1];
+    if (son) {
+        son.style.opacity = 0;
+        setTimeout(() => {
+            son.style.display = "none";
+            el.classList.remove('active');
+        }, 300); // Match this delay with the CSS transition time
+    }
+}
+
+function resetColors() {
+    for (let i = 0; i < 4; i++) {
+        items[i].children[0].style.color = "#185A4F";
+    }
+}
+
+function adjustNavHeight() {
+    if (document.documentElement.clientWidth > 1400) {
+        navbox.style.height = "320px";
+    } else if (document.documentElement.clientHeight < 1120) {
+        navbox.style.height = "245px";
+    } else {
+        navbox.style.height = "280px";
+    }
+}
+
+// Close dropdown when clicking outside the navbar
+document.addEventListener('click', function(event) {
+    let isClickInside = navbox.contains(event.target);
+    if (!isClickInside) {
+        for (let i = 0; i < items.length; i++) {
+            closeDropdown(items[i]);
         }
-        else if (document.documentElement.clientHeight < 1120){
-          navbox.style.height = "245px";
-        }
-        else{
-          navbox.style.height = "280px";
-        }
-      }
-  }
-  function leave(el){
-      for (i = 0; i < 4; i++){
-          items[i].children[0].style.color = "#185A4F";
-      }
-      if (el.children.length > 1){
-        let son = el.children[1];
-        if (getComputedStyle(son,null)["display"]=="block"){
-            son.style.opacity = 0;
-            setTimeout(function(){
-                son.style.display = "none";
-            }, 350);
-        }
-        navbox.style.height = "78px";
-      } 
-  }
-//   function over(el) {
-//     resetColors();
-//     el.children[0].style.color = "#62D881";
-//     if (el.children.length > 1) {
-//         let son = el.children[1];
-//         son.style.display = "block";
-//         setTimeout(() => {
-//             son.style.opacity = 1;
-//             navbox.style.height = getNavboxHeight();
-//         }, 0); // No delay for smoother operation
-//     }
-// }
-
-// function leave(el) {
-//     resetColors();
-//     if (el.children.length > 1) {
-//         let son = el.children[1];
-//         son.style.opacity = 0;
-//         setTimeout(() => {
-//             son.style.display = "none";
-//             navbox.style.height = "78px";
-//         }, 300); // Delay matches the CSS transition
-//     }
-// }
-
-// function resetColors() {
-//     for (let i = 0; i < 4; i++) {
-//         items[i].children[0].style.color = "#185A4F";
-//     }
-// }
-
-// function getNavboxHeight() {
-//     if (document.documentElement.clientWidth > 1400) {
-//         return "320px";
-//     } else if (document.documentElement.clientHeight < 1120) {
-//         return "245px";
-//     } else {
-//         return "280px";
-//     }
-// }
+        navbox.style.height = "78px"; // Reset the height
+    }
+});
+
+// Close dropdown on mouseleave for the whole navbar
+navbox.addEventListener('mouseleave', function() {
+    for (let i = 0; i < items.length; i++) {
+        closeDropdown(items[i]);
+    }
+    navbox.style.height = "78px"; // Reset the height
+});
 </script>