dropdown directly below menu

static/navbar.css

@@ -90,10 +90,32 @@ body{
     opacity: 0;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
 }
-/* .my-navbar > li:hover .son {
+.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 */
+}
+
+.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 */
+}
+
+.my-navbar > li .son li {
+    width: 100%; /* Ensure the dropdown items take full width */
+}
 
 /* Adjust for smaller screens */
 @media screen and (max-width:1130px) {