diff --git a/static/navbar.css b/static/navbar.css
index 2ce07ef633d86a37ce09b99844712c7dabcf3811..06b90ec9ad0f37a20ce0a8fdcfa222c9f2c920f7 100644
--- a/static/navbar.css
+++ b/static/navbar.css
@@ -103,6 +103,11 @@ body{
     opacity: 0; /* Start with invisible dropdown */
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* Smooth transition */
 }
+/* .my-navbar > li:hover .son,
+.my-navbar > li.active .son {
+    visibility: visible;
+    opacity: 1;
+} */
 
 /* Adjust for smaller screens */
 @media screen and (max-width:1130px) {
diff --git a/wiki/menu.html b/wiki/menu.html
index bde17e6533e61002cf0c9af56cdb56d3b10cc507..d2d24226f877df5f5e315b1a0d235c39513998a2 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -132,48 +132,93 @@
   </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";
+  //       }
+  //       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";
+  //     } 
+  // }
   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 navbar = document.getElementById("my-navbar");
+let items = navbar.children;
 
+function over(el) {
+    resetColors();
+    el.children[0].style.color = "#62D881";
+    
+    // Show the current dropdown
+    let son = el.children[1];
+    if (son) {
+        son.style.visibility = "visible";
+        son.style.opacity = 1;
+        el.classList.add('active');
+        adjustNavHeight();
+    }
+}
+
+function leave(el) {
+    // Close the current dropdown
+    let son = el.children[1];
+    if (son) {
+        son.style.opacity = 0;
+        setTimeout(() => {
+            son.style.visibility = "hidden";
+            el.classList.remove('active');
+            navbox.style.height = "78px"; // Reset the height
+        }, 300); // Match this delay with the CSS transition time
+    }
+}
+
+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";
+    } else if (document.documentElement.clientHeight < 1120) {
+        navbox.style.height = "245px";
+    } else {
+        navbox.style.height = "280px";
+    }
+}
 </script>