diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
index 347842cb82..da9df23f5d 100644
--- a/src/components/menu/menu-item/menu-item.style.ts
+++ b/src/components/menu/menu-item/menu-item.style.ts
@@ -181,6 +181,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
         a:hover,
         button:hover {
+          ${StyledButton} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv &&
           css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index 7de567af8c..1f88421e5e 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -2378,4 +2378,22 @@ test.describe("Styling, Scrolling & Navigation Bar Tests for Menu Component", ()
     await expect(menuItemAnchor).toHaveCSS("height", "40px");
     await expect(buttonChild).toHaveCSS("height", "40px");
   });
+
+  test("should render the menu with the expected hover styling when menu item has a PopoverContainer child with renderOpenComponent passed", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuItemWithPopoverContainerChild />);
+
+    const popoverContainerButton = page.getByRole("button", {
+      name: "notification",
+    });
+    await popoverContainerButton.hover();
+
+    await expect(popoverContainerButton).toHaveCSS("border-radius", "0px");
+    await expect(popoverContainerButton).toHaveCSS(
+      "background-color",
+      "rgba(0, 0, 0, 0)",
+    );
+  });
 });