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;
+ }
}
}