Update file navbar.css

static/navbar.css

@@ -63,6 +63,7 @@ body{
     width: 120px;
     height: 110%;
     margin-right: 25px;
+    position: relative;
 }
 #human-practice{
     width: 250px;
@@ -84,12 +85,23 @@ body{
     transition: color 0.15s linear;
 }
 .son{
-    margin-top: 30px;
+    /* margin-top: 30px;
     list-style: none;
     display: none;
     text-align: left;
     transition: all 0.3s ease-out;
-    opacity: 0;
+    opacity: 0; */
+    margin-top: 0; /* Remove any margin to avoid indentation */
+    padding: 0; /* Remove padding if not needed */
+    position: absolute; /* Position dropdown 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 */
+    visibility: hidden; /* Initially hidden */
+    opacity: 0; /* Start with invisible dropdown */
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* Smooth transition */
 }
 
 /* Adjust for smaller screens */