Navigation: Extract small fixes, and refine border rules.

packages/block-library/src/navigation-link/editor.scss

@@ -26,6 +26,7 @@
 			min-width: 200px !important;
 			height: auto !important;
 			width: auto !important;
+			overflow: visible !important;
 		}
 	}
 }

packages/block-library/src/navigation-submenu/style.scss

@@ -13,6 +13,11 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	line-height: inherit;
+
+	// Buttons default to center alignment. This becomes visible
+	// when a menu item label is long enough to wrap.
+	text-align: left;
 }
 
 .wp-block-navigation-submenu__toggle {

packages/block-library/src/navigation/editor.scss

@@ -37,6 +37,7 @@
 .wp-block-navigation__container.is-parent-of-selected-block {
 	visibility: visible;
 	opacity: 1;
+	overflow: visible;
 }
 
 // Low specificity default to ensure background color applies to submenus.

packages/block-library/src/navigation/style.scss

@@ -119,17 +119,14 @@
 		// Don't take up space when the menu is collapsed.
 		width: 0;
 		height: 0;
+		overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space.
 
 		// Submenu items.
 		> .wp-block-navigation-item {
 			> .wp-block-navigation-item__content {
 				display: flex;
 				flex-grow: 1;
 
-				// Without this, the changing to zero on hover-out can cause wrapping and
-				// result in an invinite hover/hover-out loop.
-				white-space: nowrap;
-
 				// Right-align the chevron in submenus.
 				.wp-block-navigation__submenu-icon {
 					margin-right: 0;
@@ -178,6 +175,7 @@
 	// Show submenus on hover unless they open on click.
 	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -187,6 +185,7 @@
 	// Keep submenus open when focus is within.
 	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -196,6 +195,7 @@
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -290,18 +290,25 @@
 }
 
 // Default background and font color.
-.wp-block-navigation:not(.has-background) {
-	.wp-block-navigation__submenu-container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: #fff;
-		color: #000;
-		border: 1px solid rgba(0, 0, 0, 0.15);
-	}
+.wp-block-navigation .wp-block-navigation__submenu-container {
+	// Set a background color for submenus so that they're not transparent.
+	// NOTE TO DEVS - if refactoring this code, please double-check that
+	// submenus have a default background color, this feature has regressed
+	// several times, so care needs to be taken.
+	background-color: #fff;
+	color: #000;
+
+	// Apply a border using an inset box-shadow instead of a border.
+	// That way, if an explicit background color is applied, it will be hidden
+	// behind the background color, so you don't end up with border and background.
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+
+	// Box-shadows are removed in Windows High Contrast mode, but a transparent
+	// outline will show up as an opaque border.
+	outline: 1px solid transparent;
 }
 
+
 // Navigation block inner container.
 .wp-block-navigation__container {
 
@@ -385,7 +392,7 @@
 				border: none;
 				padding-left: 32px;
 				padding-right: 32px;
-
+				box-shadow: none;
 			}
 
 			// Space unfolded items using gap and padding for submenus.