Revert "Remove z-index in the button"

This reverts commit c9785d2.

Author: engijlr

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -217,7 +217,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   render() {
     return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
-        <div id="label-button-background"></div>
         ${this.hasChildren
           ? html`<button
               id="caret-button"
@@ -232,6 +231,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
           ? this._renderLabelAsAnchor()
           : this._renderLabelAsButton()}
 
+        <div id="label-button-background"></div>
         <slot id="actions-container" name="actions"></slot>
         ${this.loading
           ? html`<uui-loader-bar id="loader"></uui-loader-bar>`
@@ -265,10 +265,13 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
       }
 
       /** Not active, not selected, not disabled: */
-      /* Only when NOT active/selected/disabled/highlight … */
       :host(:not([active], [selected], [disabled], [select-mode='highlight']))
-        #menu-item:has(#label-button:hover)
-        #label-button-background {
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background,
+      :host(:not([active], [selected], [disabled]))
+        #menu-item
+        #caret-button:hover {
         background-color: var(
           --uui-menu-item-background-color-hover,
           var(--uui-color-surface-emphasis)
@@ -477,7 +480,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         background-color: transparent;
         cursor: pointer;
         min-height: var(--uui-size-12);
-        //z-index: 1;
+        z-index: 1;
       }
 
       #label-button {
@@ -495,7 +498,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         text-decoration: none;
         color: currentColor;
         min-height: var(--uui-size-12);
-        //z-index: 1;
+        z-index: 1;
         font-weight: inherit;
       }
 
@@ -554,18 +557,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
 
       #badge {
         font-size: 12px;
-        //Why is this duplicated?
         --uui-badge-position: relative;
         --uui-badge-position: auto;
         display: block;
         margin-left: 6px;
       }
 
-      #label-button ::slotted(uui-badge) {
-        position: relative;
-        z-index: 1;
-      }
-
       /** Focus styling */
 
       :host([select-mode='highlight']) #label-button:focus-visible {