diff --git a/static/css/main.css b/static/css/main.css
index 57ad4df..492b5b4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2032,23 +2032,26 @@ a:focus {
     max-height: 0;
     background: #ffffff;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
-    transition: max-height 0.4s ease-in-out;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
     overflow-y: auto;
     z-index: 99;
     pointer-events: none; /* Disable pointer events when hidden */
+    opacity: 0;
 }
 
 /* Show menu when hovering menu itself OR when it has the hover class */
 .navigation-menu:hover,
 .navigation-menu.menu-hover {
-    max-height: calc(100vh - 50px);
+    max-height: 800px; /* Fixed height for consistent animation timing */
     pointer-events: auto; /* Enable pointer events when visible */
+    opacity: 1;
 }
 
 /* Legacy class for JS compatibility - keep for backward compatibility */
 .navigation-menu.menu-open {
-    max-height: calc(100vh - 50px);
+    max-height: 800px;
     pointer-events: auto;
+    opacity: 1;
 }
 
 .menu-content {