components/Navbar/NavbarSubMenu.module.css

@@ -10,13 +10,19 @@
   opacity: 1;
   overflow: hidden;
   pointer-events: none;
-  transition: max-height 250ms ease;
+  transform: translateY(-4px);
+  transition:
+    max-height 250ms ease,
+    opacity 180ms ease,
+    transform 180ms ease;
   background-color: var(--nav-bg);
 }
 
 .nav-submenu.open {
   max-height: var(--submenu-h);
+  opacity: 1;
   pointer-events: auto;
+  transform: translateY(0);
 }
 
 .nav-submenu-inner {
@@ -41,6 +47,7 @@
   cursor: pointer;
   font: inherit;
   color: inherit;
+  height: var(--nav-h);
 }
 
 .nav-item-with-sub {
@@ -67,7 +74,8 @@
     opacity: 0;
     transition:
       max-height 300ms,
-      opacity 300ms;
+      opacity 300ms,
+      transform 300ms ease;
   }
 
   .nav-submenu.open {