diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index bd81b95f3bd9f4..e61560d7e87a62 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -12,9 +12,10 @@ */ // Show submenus above the sibling inserter. -.has-child { +.wp-block-navigation .has-child { cursor: pointer; + .submenu-container, .wp-block-navigation-link__container { z-index: z-index(".has-child .wp-block-navigation-link__container"); } diff --git a/packages/block-library/src/navigation-link/icons.js b/packages/block-library/src/navigation-link/icons.js index 6cd15932a7199a..3a44a250b084ef 100644 --- a/packages/block-library/src/navigation-link/icons.js +++ b/packages/block-library/src/navigation-link/icons.js @@ -11,10 +11,6 @@ export const ItemSubmenuIcon = () => ( viewBox="0 0 12 12" fill="none" > - + ); diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 9e33ff17b7f3fe..5309df8a510270 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -91,7 +91,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) { * @return string */ function block_core_navigation_link_render_submenu_icon() { - return ''; + return ''; } /** diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index bb9b1988f80498..c5f6a5da54d7b1 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -82,7 +82,6 @@ .submenu-container, .wp-block-navigation-link__container { - border: 1px solid rgba(0, 0, 0, 0.15); background-color: inherit; color: inherit; position: absolute; @@ -115,13 +114,11 @@ } @include break-medium { - left: 1.5em; - // Nested submenus sit to the left on large breakpoints. .submenu-container, .wp-block-navigation-link__container { left: 100%; - top: -$border-width; + top: 0; // Prevent the menu from disappearing when the mouse is over the gap &::before { @@ -190,5 +187,11 @@ // several times, so care needs to be taken. background-color: #fff; color: #000; + border: 1px solid rgba(0, 0, 0, 0.15); + + .submenu-container, + .wp-block-navigation-link__container { + top: -1px; + } } }