add dropdown menu animation

src/css/header.css

@@ -299,7 +299,10 @@ body {
   }
 
   .navbar-item.is-hoverable:hover .navbar-dropdown {
-    display: block;
+    /* display: block; */
+    max-height: 300px; /* Adjust based on content */
+    opacity: 1;
+    visibility: visible;
   }
 
   .navbar-link::before {
@@ -366,14 +369,20 @@ body {
   }
 
   .navbar-dropdown {
+    clear: both;
     background: var(--navbar-menu-background);
     box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.16);
     border-radius: 0 0 0.25rem 0.25rem;
-    display: none;
+    /* display: none; */
     top: 100%;
     left: 0;
     min-width: 100%;
     position: absolute;
+    display: block;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
   }
 
   .navbar-dropdown .navbar-item {