diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index fbe66d5a2ca45..fed91a720d7b6 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -269,18 +269,22 @@
 // When justified space-between, open submenus leftward for last menu item.
 // When justified right, open all submenus leftwards.
 // This needs high specificity.
-// On smaller breakpoints, menus open downwards.
-@include break-medium {
-	.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
-	.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
-	.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
-	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
-		// First submenu.
-		.wp-block-navigation__submenu-container {
-			left: auto;
-			right: 0;
+.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
+.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
+.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
+	// First submenu.
+	.wp-block-navigation__submenu-container {
+		left: auto;
+		right: 0;
 
-			// Nested submenus.
+		// Nested submenus.
+		// On smaller breakpoints, nested menus open downwards.
+		.wp-block-navigation__submenu-container {
+			left: -1px; // Border width.
+			right: -1px;
+		}
+		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: auto;
 				right: 100%;
@@ -448,7 +452,7 @@
 				display: block;
 				width: 100%;
 				position: relative;
-				z-index: 2;
+				z-index: auto;
 				background-color: inherit;
 
 				.wp-block-navigation__responsive-container-close {