Navigation Menu: Show submenus only on select in the editor. (#29869)

* Show submenus only on select in the editor.

* Navigation screen fix.

* Address feedback.

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

@@ -42,18 +42,16 @@
 	background-color: inherit;
 }
 
-// Styles for submenu flyout
-.has-child {
-	// Only show the flyout when the parent menu item is selected.
-	// Do not show it on hover.
-	&,
-	&:hover {
-		> .wp-block-navigation__container {
-			opacity: 0;
-			visibility: hidden;
-		}
+// Only show the flyout on hover if the parent menu item is selected.
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
+	> .wp-block-navigation-link__container {
+		opacity: 0;
+		visibility: hidden;
 	}
+}
 
+// Styles for submenu flyout
+.has-child {
 	&.is-selected,
 	&.has-child-selected,
 	// Show the submenu list when is dragging and drag enter the list item.
@@ -65,7 +63,7 @@
 	}
 }
 
-// IE fix for submenu visibility on parent focus
+// IE fix for submenu visibility on parent focus.
 .is-editing > .wp-block-navigation__container {
 	visibility: visible;
 	opacity: 1;

packages/edit-navigation/src/components/editor/style.scss

@@ -10,7 +10,7 @@
 		margin: $grid-unit-15 auto;
 	}
 
-	// Adapt the layout of the Navigation and Link blocks
+	// Adapt the layout of the Navigation and Link blocks.
 	// to work better in the context of the Navigation Screen.
 	.wp-block-navigation {
 		margin: 0;
@@ -21,11 +21,15 @@
 	.wp-block-navigation-link {
 		display: block;
 
-		&.has-child:hover > .wp-block-navigation-link__container {
+		// Show submenus on click.
+		> .wp-block-navigation-link__container {
+			// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
+			opacity: 1;
+			visibility: visible;
 			display: none;
 		}
 
-		// Fix focus outlines
+		// Fix focus outlines.
 		&.is-selected > .wp-block-navigation-link__content,
 		&.is-selected:hover > .wp-block-navigation-link__content {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);