docs(aria/menu): fix menubar example highlight styling (#33290)

Highlight menubar items only while interacting, using :hover, :focus-within, and [aria-expanded='true'] for the open submenu state. Items inside an open menu keep their [data-active] highlight.

Author: Daherkarim

src/components-examples/aria/menu/menu-example.css

@@ -77,7 +77,9 @@
 
 .example-menu-trigger:hover,
 .example-menu-item[data-active='true'],
-.example-menu-bar-item[data-active='true'] {
+.example-menu-bar-item:hover,
+.example-menu-bar-item:focus-within,
+.example-menu-bar-item[aria-expanded='true'] {
   background: color-mix(
     in srgb,
     var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),

src/components-examples/aria/menubar/menubar.css

@@ -47,7 +47,13 @@
   opacity: 0.5;
 }
 
-[ngMenuItem][data-active='true'] {
+[ngMenu] [ngMenuItem][data-active='true'] {
+  background: color-mix(in srgb, var(--mat-sys-outline) 20%, transparent);
+}
+
+[ngMenuBar] > [ngMenuItem]:hover,
+[ngMenuBar] > [ngMenuItem]:focus-within,
+[ngMenuBar] > [ngMenuItem][aria-expanded='true'] {
   background: color-mix(in srgb, var(--mat-sys-outline) 20%, transparent);
 }