third attempt glitch fix

static/navbar.css

@@ -63,6 +63,7 @@ body{
     width: 120px;
     height: 110%;
     margin-right: 25px;
+    position: relative;
 }
 #human-practice{
     width: 250px;
@@ -73,31 +74,6 @@ body{
     margin-right: 30px; /* Ensure sufficient space between "Education" and "Safety" */
 
 }
-.my-navbar>li a{
-    color: var(--text, var(--text, rgba(24, 90, 79, 1)));
-    font-family: AccidenzCommons;
-    font-size: 25px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    text-decoration: none;
-    transition: color 0.15s linear;
-}
-.son{
-    margin-top: 30px;
-    list-style: none;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-}
-.my-navbar > li {
-    float: left;
-    width: 120px;
-    height: 110%;
-    margin-right: 25px;
-    position: relative; /* Keep this to position dropdowns relative to their parent */
-}
-
 .my-navbar > li .son {
     margin-top: 0; /* Remove any margin to avoid indentation */
     padding: 0; /* Remove padding if not needed */
@@ -107,15 +83,15 @@ body{
     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 */
+    visibility: hidden; /* Initially hidden */
+    opacity: 0; /* Start with invisible dropdown */
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* Smooth transition for visibility and opacity */
 }
 
 .my-navbar > li:hover .son,
 .my-navbar > li.active .son {
-    display: block; /* Show dropdown on hover or when active */
-    opacity: 1; /* Make it visible */
+    visibility: visible; /* Make it visible */
+    opacity: 1; /* Make it opaque */
 }
 
 /* Adjust for smaller screens */

wiki/menu.html

@@ -174,79 +174,6 @@
         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]);
-//         }
-//     }
-    
-//     // 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]);
-//         }
-//         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>