diff --git a/.changeset/honest-impalas-rescue.md b/.changeset/honest-impalas-rescue.md
new file mode 100644
index 0000000000..bac076bba6
--- /dev/null
+++ b/.changeset/honest-impalas-rescue.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed a bug in the `SidebarSubmenu` core component that caused the nested menu to overlap with the sidebar when the user hovers over the pinned sidebar.
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
index f26d59fc1d..4c8ca2e0bf 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
+++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
@@ -46,11 +46,12 @@ const useStyles = makeStyles<
       flexFlow: 'column nowrap',
       alignItems: 'flex-start',
       position: 'fixed',
+      opacity: 0,
       [theme.breakpoints.up('sm')]: {
         marginLeft: props.left,
-        transition: theme.transitions.create('margin-left', {
+        transition: theme.transitions.create(['margin-left', 'opacity'], {
           easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.shortest,
+          duration: props.submenuConfig.defaultOpenDelayMs,
         }),
       },
       top: 0,
@@ -71,6 +72,8 @@ const useStyles = makeStyles<
       },
     }),
     drawerOpen: props => ({
+      marginLeft: props.left,
+      opacity: 1,
       width: props.submenuConfig.drawerWidthOpen,
       [theme.breakpoints.down('xs')]: {
         width: '100%',