diff --git a/change/@fluentui-web-components-178171d1-0703-48ef-85dc-74bfd1bef5e2.json b/change/@fluentui-web-components-178171d1-0703-48ef-85dc-74bfd1bef5e2.json
new file mode 100644
index 0000000000000..5ddb2075cf660
--- /dev/null
+++ b/change/@fluentui-web-components-178171d1-0703-48ef-85dc-74bfd1bef5e2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: layering zindex issue with sub menus",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 6dfc6a2d00d8d..851fab9348f5a 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -43,6 +43,7 @@ export const menuItemStyles: (context: ElementDefinitionContext, definition: Men
       cursor: pointer;
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid transparent;
+      position: relative;
     }
 
     :host(.indent-0) {
@@ -95,6 +96,7 @@ export const menuItemStyles: (context: ElementDefinitionContext, definition: Men
     :host(.expanded) {
       background: ${neutralFillStealthActive};
       color: ${neutralForegroundRest};
+      z-index: 2;
     }
 
     :host([disabled]) {
diff --git a/packages/web-components/src/menu/menu.stories.ts b/packages/web-components/src/menu/menu.stories.ts
index ce27f45957ea0..119a586e6c9ba 100644
--- a/packages/web-components/src/menu/menu.stories.ts
+++ b/packages/web-components/src/menu/menu.stories.ts
@@ -12,7 +12,14 @@ const MenuTemplate = () => `
       Menu item 2
       <fluent-menu>
         <fluent-menu-item>Nested Menu item 2.1</fluent-menu-item>
-        <fluent-menu-item>Nested Menu item 2.2</fluent-menu-item>
+        <fluent-menu-item>
+          Nested Menu item 2.2
+          <fluent-menu>
+            <fluent-menu-item>Nested Menu item 2.2.1</fluent-menu-item>
+            <fluent-menu-item>Nested Menu item 2.2.2</fluent-menu-item>
+            <fluent-menu-item>Nested Menu item 2.2.3</fluent-menu-item>
+          </fluent-menu>
+        </fluent-menu-item>
         <fluent-menu-item>Nested Menu item 2.3</fluent-menu-item>
       </fluent-menu>
     </fluent-menu-item>