diff --git a/app/components/layout/TopNavMenus.module.css b/app/components/layout/TopNavMenus.module.css
index 89c20752b..b78862b51 100644
--- a/app/components/layout/TopNavMenus.module.css
+++ b/app/components/layout/TopNavMenus.module.css
@@ -83,7 +83,8 @@
 	top: calc(100% + var(--s-1));
 	left: 0;
 	z-index: 1;
-	display: none;
+	display: grid;
+	visibility: hidden;
 	width: max-content;
 	grid-auto-flow: column;
 	grid-template-rows: repeat(2, auto);
@@ -92,18 +93,22 @@
 	border: var(--border-style);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg-high);
+	transition: visibility 0s linear 0.3s;
 
 	.menuWrapper:hover & {
-		display: grid;
+		visibility: visible;
+		transition-delay: 0s;
+	}
+
+	.container:hover .menuWrapper:not(:hover) & {
+		display: none;
 	}
 
 	&::before {
 		content: "";
 		position: absolute;
-		top: calc(-1 * (var(--s-1) + var(--border-width)));
-		left: 0;
-		right: 0;
-		height: calc(var(--s-1) + var(--border-width));
+		z-index: -1;
+		inset: calc(-1 * (var(--s-1) + var(--border-width)));
 	}
 }