[Feature]: Keep hover selection on L1 menu item when hovering on L2 (submenu) menu items

[abhpande09]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

When hovering on submenu items (L2 Menu) the hover selection on parent Menu (L1 Menu) should stay as is.

Sharing a snapshot of the existing behavior in V9 Menus (notice no hover selection is there on Insert Menu Item)-

Sharing a snapshot of what the desired behavior should be like (notice hover selection is there on Insert Menu Item)-

Have you discussed this feature with our team

ling1726

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Normal

[ling1726]

This can already be achieved by controlling stete and applying css overrides. Will need to follow up with design to make sure that this is desirable for v9

[smhigley]

@abhpande09 here's an example of overriding our default styles to keep hover styles when the submenu is expanded: https://stackblitz.com/edit/qyp5zv?file=src%2Fexample.tsx

Would that work for your use case?