diff --git a/packages/pluggableWidgets/popup-menu-web/CHANGELOG.md b/packages/pluggableWidgets/popup-menu-web/CHANGELOG.md
index fdc8e7cc33..897959458e 100644
--- a/packages/pluggableWidgets/popup-menu-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/popup-menu-web/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the "Close on" option for the Hover trigger was not working. The menu will now correctly stay open until you click outside when "Click outside" is selected, or close when you hover away when "Hover leave" is selected.
+- We fixed an issue where nested popup menus (a popup menu inside another popup menu's content) would close unexpectedly when hovering between parent and child menus.
+
 ## [4.2.0] - 2026-05-04
 
 ### Added
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/MenuWithContext.tsx b/packages/pluggableWidgets/popup-menu-web/src/__tests__/MenuWithContext.tsx
index 2e56ff6f5d..cf4aa305d5 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/MenuWithContext.tsx
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/MenuWithContext.tsx
@@ -9,7 +9,8 @@ export function MenuWithContext(props: MenuProps): ReactElement {
         onOpenChange: jest.fn(),
         placement: props.position,
         trigger: props.trigger,
-        clippingStrategy: props.clippingStrategy
+        clippingStrategy: props.clippingStrategy,
+        hoverCloseOn: props.hoverCloseOn
     });
 
     return (
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/PopupTriggerWithContext.tsx b/packages/pluggableWidgets/popup-menu-web/src/__tests__/PopupTriggerWithContext.tsx
index 1a63c0a33f..10ec4065a5 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/PopupTriggerWithContext.tsx
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/PopupTriggerWithContext.tsx
@@ -4,7 +4,14 @@ import { PopupTrigger } from "../components/PopupTrigger";
 import { usePopup } from "../hooks/usePopup";
 
 export function PopupTriggerWithContext(props: PropsWithChildren): ReactElement {
-    const popup = usePopup({ open: true, onOpenChange: jest.fn(), trigger: "onclick", clippingStrategy: "absolute" });
+    const popup = usePopup({
+        open: true,
+        onOpenChange: jest.fn(),
+        trigger: "onclick",
+        clippingStrategy: "absolute",
+        placement: "top",
+        hoverCloseOn: "onClickOutside"
+    });
 
     return (
         <PopupContext.Provider value={popup}>
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/Menu.spec.tsx.snap b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/Menu.spec.tsx.snap
index cecd9fde46..b64ac23785 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/Menu.spec.tsx.snap
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/Menu.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`Menu renders menu 1`] = `
       class="popupmenu-menu"
       data-floating-ui-focusable=""
       data-overlay-content="true"
-      id=":r0:"
+      id=":r1:"
       role="dialog"
       style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
       tabindex="0"
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
index a274e35331..0507a423a1 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Popup Menu renders popup menu 1`] = `
     class="popupmenu mx-popup-menu"
   >
     <div
-      aria-controls=":r0:"
+      aria-controls=":r1:"
       aria-expanded="true"
       aria-haspopup="dialog"
       aria-hidden="true"
@@ -34,7 +34,7 @@ exports[`Popup Menu renders popup menu 1`] = `
         class="popupmenu-menu"
         data-floating-ui-focusable=""
         data-overlay-content="true"
-        id=":r0:"
+        id=":r1:"
         role="dialog"
         style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
         tabindex="0"
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupTrigger.spec.tsx.snap b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupTrigger.spec.tsx.snap
index c01aa8c1ef..e1b126893e 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupTrigger.spec.tsx.snap
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/__snapshots__/PopupTrigger.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Popup Trigger renders popup trigger 1`] = `
 <DocumentFragment>
   <div
-    aria-controls=":r0:"
+    aria-controls=":r1:"
     aria-expanded="true"
     aria-haspopup="dialog"
     class="popupmenu-trigger"
diff --git a/packages/pluggableWidgets/popup-menu-web/src/__tests__/usePopup.spec.tsx b/packages/pluggableWidgets/popup-menu-web/src/__tests__/usePopup.spec.tsx
index 8480e60e9d..f0f4f0e112 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/__tests__/usePopup.spec.tsx
+++ b/packages/pluggableWidgets/popup-menu-web/src/__tests__/usePopup.spec.tsx
@@ -1,13 +1,127 @@
+import { useHover } from "@floating-ui/react";
 import { renderHook } from "@testing-library/react";
-
 import { usePopup } from "../hooks/usePopup";
 
+jest.mock("@floating-ui/react", () => ({
+    ...jest.requireActual("@floating-ui/react"),
+    useHover: jest.fn()
+}));
+
 describe("usePopup", () => {
-    it("somethign", () => {
-        const popup = renderHook(() => {
-            return usePopup({ open: false, onOpenChange: jest.fn(), trigger: "onclick", clippingStrategy: "absolute" });
+    const mockUseHover = useHover as jest.MockedFunction<typeof useHover>;
+    const mockOnOpenChange = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockUseHover.mockReturnValue({});
+    });
+
+    describe("basic functionality", () => {
+        it("returns open state when false", () => {
+            const { result } = renderHook(() =>
+                usePopup({
+                    open: false,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onclick",
+                    clippingStrategy: "absolute",
+                    placement: "top",
+                    hoverCloseOn: "onClickOutside"
+                })
+            );
+
+            expect(result.current.open).toBe(false);
         });
 
-        expect(popup.result.current.open).toBe(false);
+        it("returns open state when true", () => {
+            const { result } = renderHook(() =>
+                usePopup({
+                    open: true,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onclick",
+                    clippingStrategy: "absolute",
+                    placement: "bottom",
+                    hoverCloseOn: "onHoverLeave"
+                })
+            );
+
+            expect(result.current.open).toBe(true);
+        });
+
+        it("returns nodeId", () => {
+            const { result } = renderHook(() =>
+                usePopup({
+                    open: true,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onclick",
+                    clippingStrategy: "absolute",
+                    placement: "bottom",
+                    hoverCloseOn: "onHoverLeave"
+                })
+            );
+
+            expect(result.current.nodeId).toBeDefined();
+            expect(typeof result.current.nodeId).toBe("string");
+        });
+
+        it("returns required floating UI properties", () => {
+            const { result } = renderHook(() =>
+                usePopup({
+                    open: true,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onclick",
+                    clippingStrategy: "fixed",
+                    placement: "top",
+                    hoverCloseOn: "onHoverLeave"
+                })
+            );
+
+            expect(result.current.context).toBeDefined();
+            expect(result.current.floatingStyles).toBeDefined();
+            expect(result.current.refs).toBeDefined();
+            expect(result.current.getReferenceProps).toBeDefined();
+            expect(result.current.getFloatingProps).toBeDefined();
+        });
+    });
+
+    describe("hover interaction with hoverCloseOn", () => {
+        it("disables hover when trigger is onclick", () => {
+            renderHook(() =>
+                usePopup({
+                    open: false,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onclick",
+                    clippingStrategy: "absolute",
+                    placement: "bottom",
+                    hoverCloseOn: "onHoverLeave"
+                })
+            );
+
+            expect(mockUseHover).toHaveBeenCalledWith(
+                expect.anything(),
+                expect.objectContaining({
+                    enabled: false
+                })
+            );
+        });
+
+        it("enables hover when trigger is onhover", () => {
+            renderHook(() =>
+                usePopup({
+                    open: false,
+                    onOpenChange: mockOnOpenChange,
+                    trigger: "onhover",
+                    clippingStrategy: "absolute",
+                    placement: "bottom",
+                    hoverCloseOn: "onHoverLeave"
+                })
+            );
+
+            expect(mockUseHover).toHaveBeenCalledWith(
+                expect.anything(),
+                expect.objectContaining({
+                    enabled: true
+                })
+            );
+        });
     });
 });
diff --git a/packages/pluggableWidgets/popup-menu-web/src/components/Menu.tsx b/packages/pluggableWidgets/popup-menu-web/src/components/Menu.tsx
index d536d9e819..05b3c66fde 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/components/Menu.tsx
+++ b/packages/pluggableWidgets/popup-menu-web/src/components/Menu.tsx
@@ -10,7 +10,7 @@ export interface MenuProps extends PopupMenuContainerProps {
 }
 
 export const Menu = forwardRef((props: MenuProps, propRef: RefObject<HTMLDivElement>): ReactElement | null => {
-    const { context: floatingContext, floatingStyles, getFloatingProps, modal, refs } = usePopupContext();
+    const { context: floatingContext, floatingStyles, getFloatingProps, refs } = usePopupContext();
     const ref = useMergeRefs([refs.setFloating, propRef]);
 
     if (!floatingContext.open) {
@@ -20,7 +20,7 @@ export const Menu = forwardRef((props: MenuProps, propRef: RefObject<HTMLDivElem
     const menuOptions = createMenuOptions(props, props.onItemClick);
 
     return (
-        <FloatingFocusManager context={floatingContext} modal={modal}>
+        <FloatingFocusManager context={floatingContext}>
             <div className="widget-popupmenu-root">
                 <ul
                     ref={ref}
diff --git a/packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx b/packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx
index bd524ea1a9..f03371f14e 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx
+++ b/packages/pluggableWidgets/popup-menu-web/src/components/PopupMenu.tsx
@@ -1,3 +1,4 @@
+import { FloatingNode, FloatingTree, useFloatingParentNodeId } from "@floating-ui/react";
 import classNames from "classnames";
 import { ActionValue } from "mendix";
 import { ReactElement, useCallback, useEffect, useState } from "react";
@@ -8,7 +9,7 @@ import { PopupTrigger } from "./PopupTrigger";
 import { PopupMenuContainerProps } from "../../typings/PopupMenuProps";
 import { usePopup } from "../hooks/usePopup";
 
-export function PopupMenu(props: PopupMenuContainerProps): ReactElement {
+function PopupMenuComponent(props: PopupMenuContainerProps): ReactElement {
     const [visibility, setVisibility] = useState(props.menuToggle);
     const open = visibility;
     const popup = usePopup({
@@ -16,7 +17,8 @@ export function PopupMenu(props: PopupMenuContainerProps): ReactElement {
         onOpenChange: setVisibility,
         placement: props.position,
         trigger: props.trigger,
-        clippingStrategy: props.clippingStrategy
+        clippingStrategy: props.clippingStrategy,
+        hoverCloseOn: props.hoverCloseOn
     });
 
     const handleOnClickItem = useCallback(
@@ -33,10 +35,28 @@ export function PopupMenu(props: PopupMenuContainerProps): ReactElement {
 
     return (
         <PopupContext.Provider value={popup}>
-            <div className={classNames("popupmenu", props.class)}>
-                <PopupTrigger>{props.menuTrigger}</PopupTrigger>
-                <Menu {...props} onItemClick={handleOnClickItem} />
-            </div>
+            <FloatingNode id={popup.nodeId}>
+                <div className={classNames("popupmenu", props.class)}>
+                    <PopupTrigger>{props.menuTrigger}</PopupTrigger>
+                    <Menu {...props} onItemClick={handleOnClickItem} />
+                </div>
+            </FloatingNode>
         </PopupContext.Provider>
     );
 }
+
+export function PopupMenu(props: PopupMenuContainerProps): ReactElement {
+    const parentId = useFloatingParentNodeId();
+
+    // If this is a root popup (no parent), wrap it in FloatingTree
+    if (parentId == null) {
+        return (
+            <FloatingTree>
+                <PopupMenuComponent {...props} />
+            </FloatingTree>
+        );
+    }
+
+    // If this is a nested popup, just render the component
+    return <PopupMenuComponent {...props} />;
+}
diff --git a/packages/pluggableWidgets/popup-menu-web/src/hooks/usePopup.ts b/packages/pluggableWidgets/popup-menu-web/src/hooks/usePopup.ts
index dfcd02f25c..10979aeee5 100644
--- a/packages/pluggableWidgets/popup-menu-web/src/hooks/usePopup.ts
+++ b/packages/pluggableWidgets/popup-menu-web/src/hooks/usePopup.ts
@@ -8,21 +8,22 @@ import {
     useClick,
     useDismiss,
     useFloating,
+    useFloatingNodeId,
     UseFloatingReturn,
     useHover,
     useInteractions,
     UseInteractionsReturn,
     useRole
 } from "@floating-ui/react";
-import { ClippingStrategyEnum, TriggerEnum } from "../../typings/PopupMenuProps";
+import { ClippingStrategyEnum, HoverCloseOnEnum, TriggerEnum } from "../../typings/PopupMenuProps";
 
 interface PopupOptions {
-    placement?: Placement;
-    modal?: boolean;
-    open?: boolean;
+    placement: Placement;
+    open: boolean;
     onOpenChange?: (open: boolean) => void;
-    clippingStrategy?: ClippingStrategyEnum;
-    trigger?: TriggerEnum;
+    clippingStrategy: ClippingStrategyEnum;
+    trigger: TriggerEnum;
+    hoverCloseOn: HoverCloseOnEnum;
 }
 
 type FloatingReturn = Pick<UseFloatingReturn, "context" | "floatingStyles" | "refs">;
@@ -30,19 +31,22 @@ type InteractionReturn = Pick<UseInteractionsReturn, "getFloatingProps" | "getRe
 
 export type UsePopupReturn = FloatingReturn &
     InteractionReturn & {
-        modal?: boolean;
-        open?: boolean;
+        open: boolean;
+        nodeId: string;
     };
 
 export function usePopup({
     placement = "bottom",
-    modal,
     open,
     onOpenChange: setOpen,
     trigger,
-    clippingStrategy
-}: PopupOptions = {}): UsePopupReturn {
+    clippingStrategy,
+    hoverCloseOn
+}: PopupOptions): UsePopupReturn {
+    const nodeId = useFloatingNodeId();
+
     const { context, floatingStyles, refs } = useFloating({
+        nodeId,
         middleware: [offset(5), flip(), shift()],
         onOpenChange: setOpen,
         strategy: clippingStrategy,
@@ -54,7 +58,11 @@ export function usePopup({
     const dismiss = useDismiss(context);
     const role = useRole(context);
     const click = useClick(context, { enabled: trigger === "onclick" });
-    const hover = useHover(context, { enabled: trigger === "onhover", handleClose: safePolygon() });
+
+    const hover = useHover(context, {
+        enabled: trigger === "onhover",
+        handleClose: hoverCloseOn === "onHoverLeave" ? safePolygon() : neverClose
+    });
 
     const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role, click, hover]);
 
@@ -63,8 +71,15 @@ export function usePopup({
         floatingStyles,
         getFloatingProps,
         getReferenceProps,
-        modal,
         open,
-        refs
+        refs,
+        nodeId
     };
 }
+
+const neverClose = Object.assign(
+    (): (() => void) => {
+        return (): void => {};
+    },
+    { __options: { blockPointerEvents: false } }
+);