diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts
index 2049b44..f76003b 100644
--- a/frontend/src/components/artists-view/artists-view.ts
+++ b/frontend/src/components/artists-view/artists-view.ts
@@ -78,6 +78,10 @@ export class ArtistsView extends LitElement {
     @query('#playlist-submenu')
     private playlistSubmenuPopup!: HTMLElement;
 
+    private submenuCloseTimer: ReturnType<
+        typeof setTimeout
+    > | null = null;
+
     // ----- Close handlers -----
 
     private closeHandler = () =>
@@ -695,7 +699,24 @@ export class ArtistsView extends LitElement {
      * Playlist submenu
      * ================================================================ */
 
+    private clearSubmenuCloseTimer() {
+        if (this.submenuCloseTimer !== null) {
+            clearTimeout(this.submenuCloseTimer);
+            this.submenuCloseTimer = null;
+        }
+    }
+
+    private scheduleSubmenuClose = () => {
+        this.clearSubmenuCloseTimer();
+        this.submenuCloseTimer = setTimeout(() => {
+            this.submenuCloseTimer = null;
+            this.closePlaylistSubmenu();
+        }, 150);
+    };
+
     private async showPlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (this.playlistSubmenuOpen) return;
 
         const artist = this.contextMenuArtist;
@@ -729,6 +750,8 @@ export class ArtistsView extends LitElement {
     }
 
     private closePlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (!this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = false;
@@ -868,6 +891,8 @@ export class ArtistsView extends LitElement {
                                       this.onContextMenuAction(
                                           'play',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -880,6 +905,8 @@ export class ArtistsView extends LitElement {
                                       this.onContextMenuAction(
                                           'add-to-queue',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -892,6 +919,8 @@ export class ArtistsView extends LitElement {
                                       this.onContextMenuAction(
                                           'play-next',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -901,8 +930,12 @@ export class ArtistsView extends LitElement {
                               </wa-dropdown-item>
                               <wa-dropdown-item
                                   class="submenu-item"
-                                  @mouseenter=${() =>
-                                      this.showPlaylistSubmenu()}
+                                  @mouseenter=${() => {
+                                      this.clearSubmenuCloseTimer();
+                                      void this.showPlaylistSubmenu();
+                                  }}
+                                  @mouseleave=${this
+                                      .scheduleSubmenuClose}
                                   @click=${(
                                       e: Event,
                                   ) => {
@@ -935,16 +968,23 @@ export class ArtistsView extends LitElement {
             >
                 ${this.playlistSubmenuOpen
                     ? html`
-                          <playlist-picker
-                              .filePaths=${this
-                                  .playlistFilePaths}
-                              @playlist-action-complete=${this
-                                  .onPlaylistActionComplete}
-                              @click=${(
-                                  e: Event,
-                              ) =>
-                                  e.stopPropagation()}
-                          ></playlist-picker>
+                          <div
+                              @mouseenter=${() =>
+                                  this.clearSubmenuCloseTimer()}
+                              @mouseleave=${this
+                                  .scheduleSubmenuClose}
+                          >
+                              <playlist-picker
+                                  .filePaths=${this
+                                      .playlistFilePaths}
+                                  @playlist-action-complete=${this
+                                      .onPlaylistActionComplete}
+                                  @click=${(
+                                      e: Event,
+                                  ) =>
+                                      e.stopPropagation()}
+                              ></playlist-picker>
+                          </div>
                       `
                     : nothing}
             </wa-popup>
diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts
index 906b234..2a82aff 100644
--- a/frontend/src/components/cover-grid/cover-grid.ts
+++ b/frontend/src/components/cover-grid/cover-grid.ts
@@ -158,6 +158,10 @@ export class CoverGrid extends LitElement {
         typeof setTimeout
     > | null = null;
 
+    private submenuCloseTimer: ReturnType<
+        typeof setTimeout
+    > | null = null;
+
     private closeHandler = () => this.closeContextMenu();
 
     private mousedownCloseHandler = (
@@ -3139,7 +3143,24 @@ export class CoverGrid extends LitElement {
         }
     }
 
+    private clearSubmenuCloseTimer() {
+        if (this.submenuCloseTimer !== null) {
+            clearTimeout(this.submenuCloseTimer);
+            this.submenuCloseTimer = null;
+        }
+    }
+
+    private scheduleSubmenuClose = () => {
+        this.clearSubmenuCloseTimer();
+        this.submenuCloseTimer = setTimeout(() => {
+            this.submenuCloseTimer = null;
+            this.closePlaylistSubmenu();
+        }, 150);
+    };
+
     private async showPlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (this.playlistSubmenuOpen) return;
 
         if (this.contextMenuTarget.kind === 'track') {
@@ -3174,6 +3195,8 @@ export class CoverGrid extends LitElement {
     }
 
     private closePlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (!this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = false;
@@ -3548,6 +3571,8 @@ export class CoverGrid extends LitElement {
                         this.onContextMenuAction(
                             'play',
                         )}
+                                  @mouseenter=${() =>
+                        this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -3560,6 +3585,8 @@ export class CoverGrid extends LitElement {
                         this.onContextMenuAction(
                             'add-to-queue',
                         )}
+                                  @mouseenter=${() =>
+                        this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -3572,6 +3599,8 @@ export class CoverGrid extends LitElement {
                         this.onContextMenuAction(
                             'play-next',
                         )}
+                                  @mouseenter=${() =>
+                        this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -3581,8 +3610,12 @@ export class CoverGrid extends LitElement {
                               </wa-dropdown-item>
                               <wa-dropdown-item
                                   class="submenu-item"
-                                  @mouseenter=${() =>
-                        this.showPlaylistSubmenu()}
+                                  @mouseenter=${() => {
+                        this.clearSubmenuCloseTimer();
+                        void this.showPlaylistSubmenu();
+                    }}
+                                  @mouseleave=${this
+                        .scheduleSubmenuClose}
                                   @click=${(e: Event) => {
                         e.stopPropagation();
                         void this.showPlaylistSubmenu();
@@ -3609,6 +3642,8 @@ export class CoverGrid extends LitElement {
                                                 this.onContextMenuAction(
                                                     'track-details',
                                                 )}
+                                            @mouseenter=${() =>
+                                                this.closePlaylistSubmenu()}
                                         >
                                             <wa-icon
                                                 slot="icon"
@@ -3633,12 +3668,21 @@ export class CoverGrid extends LitElement {
             >
                 ${this.playlistSubmenuOpen
                 ? html`
-                          <playlist-picker
-                              .filePaths=${this.playlistFilePaths}
-                              @playlist-action-complete=${this.onPlaylistActionComplete}
-                              @click=${(e: Event) =>
+                          <div
+                              @mouseenter=${() =>
+                        this.clearSubmenuCloseTimer()}
+                              @mouseleave=${this
+                        .scheduleSubmenuClose}
+                          >
+                              <playlist-picker
+                                  .filePaths=${this
+                        .playlistFilePaths}
+                                  @playlist-action-complete=${this
+                        .onPlaylistActionComplete}
+                                  @click=${(e: Event) =>
                         e.stopPropagation()}
-                          ></playlist-picker>
+                              ></playlist-picker>
+                          </div>
                       `
                 : nothing}
             </wa-popup>
diff --git a/frontend/src/components/playlist-view/playlist-view.ts b/frontend/src/components/playlist-view/playlist-view.ts
index 62f9c7f..a5ff672 100644
--- a/frontend/src/components/playlist-view/playlist-view.ts
+++ b/frontend/src/components/playlist-view/playlist-view.ts
@@ -198,6 +198,10 @@ export class PlaylistView
     @query('track-details')
     private trackDetailsDialog!: TrackDetails;
 
+    private submenuCloseTimer: ReturnType<
+        typeof setTimeout
+    > | null = null;
+
     private closeContextMenuHandler = () => {
         this.closeContextMenu();
         this.closePlaylistContextMenu();
@@ -1464,7 +1468,24 @@ export class PlaylistView
         }
     }
 
+    private clearSubmenuCloseTimer() {
+        if (this.submenuCloseTimer !== null) {
+            clearTimeout(this.submenuCloseTimer);
+            this.submenuCloseTimer = null;
+        }
+    }
+
+    private scheduleSubmenuClose = () => {
+        this.clearSubmenuCloseTimer();
+        this.submenuCloseTimer = setTimeout(() => {
+            this.submenuCloseTimer = null;
+            this.closePlaylistSubmenu();
+        }, 150);
+    };
+
     private async showPlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = true;
@@ -1490,6 +1511,8 @@ export class PlaylistView
     }
 
     private closePlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (!this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = false;
@@ -1841,6 +1864,8 @@ export class PlaylistView
                                       this.onContextMenuAction(
                                           'play',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1853,6 +1878,8 @@ export class PlaylistView
                                       this.onContextMenuAction(
                                           'add-to-queue',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1865,6 +1892,8 @@ export class PlaylistView
                                       this.onContextMenuAction(
                                           'play-next',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1877,6 +1906,8 @@ export class PlaylistView
                                       this.onContextMenuAction(
                                           'remove',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1886,8 +1917,12 @@ export class PlaylistView
                               </wa-dropdown-item>
                               <wa-dropdown-item
                                   class="submenu-item"
-                                  @mouseenter=${() =>
-                                      this.showPlaylistSubmenu()}
+                                  @mouseenter=${() => {
+                                      this.clearSubmenuCloseTimer();
+                                      void this.showPlaylistSubmenu();
+                                  }}
+                                  @mouseleave=${this
+                                      .scheduleSubmenuClose}
                                   @click=${(e: Event) => {
                                       e.stopPropagation();
                                       void this.showPlaylistSubmenu();
@@ -1912,6 +1947,8 @@ export class PlaylistView
                                                 this.onContextMenuAction(
                                                     'track-details',
                                                 )}
+                                            @mouseenter=${() =>
+                                                this.closePlaylistSubmenu()}
                                         >
                                             <wa-icon
                                                 slot="icon"
@@ -1937,13 +1974,20 @@ export class PlaylistView
                 ${this.playlistSubmenuOpen &&
                 this.selection.hasSelection
                     ? html`
-                          <playlist-picker
-                              .filePaths=${this.getSelectedFilePaths()}
-                              @playlist-action-complete=${this
-                                  .onPlaylistActionComplete}
-                              @click=${(e: Event) =>
-                                  e.stopPropagation()}
-                          ></playlist-picker>
+                          <div
+                              @mouseenter=${() =>
+                                  this.clearSubmenuCloseTimer()}
+                              @mouseleave=${this
+                                  .scheduleSubmenuClose}
+                          >
+                              <playlist-picker
+                                  .filePaths=${this.getSelectedFilePaths()}
+                                  @playlist-action-complete=${this
+                                      .onPlaylistActionComplete}
+                                  @click=${(e: Event) =>
+                                      e.stopPropagation()}
+                              ></playlist-picker>
+                          </div>
                       `
                     : nothing}
             </wa-popup>
diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts
index b4b420e..fa1db8a 100644
--- a/frontend/src/components/queue-panel/queue-panel.ts
+++ b/frontend/src/components/queue-panel/queue-panel.ts
@@ -103,6 +103,10 @@ export class QueuePanel
         }
     };
 
+    private submenuCloseTimer: ReturnType<
+        typeof setTimeout
+    > | null = null;
+
     private closeContextMenuHandler = () =>
         this.closeContextMenu();
 
@@ -772,7 +776,24 @@ export class QueuePanel
         }
     }
 
+    private clearSubmenuCloseTimer() {
+        if (this.submenuCloseTimer !== null) {
+            clearTimeout(this.submenuCloseTimer);
+            this.submenuCloseTimer = null;
+        }
+    }
+
+    private scheduleSubmenuClose = () => {
+        this.clearSubmenuCloseTimer();
+        this.submenuCloseTimer = setTimeout(() => {
+            this.submenuCloseTimer = null;
+            this.closePlaylistSubmenu();
+        }, 150);
+    };
+
     private async showPlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = true;
@@ -796,6 +817,8 @@ export class QueuePanel
     }
 
     private closePlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (!this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = false;
@@ -1417,6 +1440,8 @@ export class QueuePanel
                                       this.onContextMenuAction(
                                           'play',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1429,6 +1454,8 @@ export class QueuePanel
                                       this.onContextMenuAction(
                                           'remove',
                                       )}
+                                  @mouseenter=${() =>
+                                      this.closePlaylistSubmenu()}
                               >
                                   <wa-icon
                                       slot="icon"
@@ -1438,8 +1465,12 @@ export class QueuePanel
                               </wa-dropdown-item>
                               <wa-dropdown-item
                                   class="submenu-item"
-                                  @mouseenter=${() =>
-                                      this.showPlaylistSubmenu()}
+                                  @mouseenter=${() => {
+                                      this.clearSubmenuCloseTimer();
+                                      void this.showPlaylistSubmenu();
+                                  }}
+                                  @mouseleave=${this
+                                      .scheduleSubmenuClose}
                                   @click=${(e: Event) => {
                                       e.stopPropagation();
                                       void this.showPlaylistSubmenu();
@@ -1464,6 +1495,8 @@ export class QueuePanel
                                                 this.onContextMenuAction(
                                                     'track-details',
                                                 )}
+                                            @mouseenter=${() =>
+                                                this.closePlaylistSubmenu()}
                                         >
                                             <wa-icon
                                                 slot="icon"
@@ -1489,14 +1522,21 @@ export class QueuePanel
                 ${this.playlistSubmenuOpen &&
                 this.selection.hasSelection
                     ? html`
-                          <playlist-picker
-                              id="context-playlist-picker"
-                              .filePaths=${this.getSelectedFilePaths()}
-                              @playlist-action-complete=${this
-                                  .onContextPlaylistActionComplete}
-                              @click=${(e: Event) =>
-                                  e.stopPropagation()}
-                          ></playlist-picker>
+                          <div
+                              @mouseenter=${() =>
+                                  this.clearSubmenuCloseTimer()}
+                              @mouseleave=${this
+                                  .scheduleSubmenuClose}
+                          >
+                              <playlist-picker
+                                  id="context-playlist-picker"
+                                  .filePaths=${this.getSelectedFilePaths()}
+                                  @playlist-action-complete=${this
+                                      .onContextPlaylistActionComplete}
+                                  @click=${(e: Event) =>
+                                      e.stopPropagation()}
+                              ></playlist-picker>
+                          </div>
                       `
                     : nothing}
             </wa-popup>
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index f1b779d..fefad59 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -104,6 +104,10 @@ export class TrackList extends LitElement implements SelectionHost {
 
     private lastActiveTrackPath: string | null = null;
 
+    private submenuCloseTimer: ReturnType<
+        typeof setTimeout
+    > | null = null;
+
     private closeHandler = () => this.closeContextMenu();
 
     private mousedownCloseHandler = (
@@ -1248,7 +1252,24 @@ export class TrackList extends LitElement implements SelectionHost {
         }
     }
 
+    private clearSubmenuCloseTimer() {
+        if (this.submenuCloseTimer !== null) {
+            clearTimeout(this.submenuCloseTimer);
+            this.submenuCloseTimer = null;
+        }
+    }
+
+    private scheduleSubmenuClose = () => {
+        this.clearSubmenuCloseTimer();
+        this.submenuCloseTimer = setTimeout(() => {
+            this.submenuCloseTimer = null;
+            this.closePlaylistSubmenu();
+        }, 150);
+    };
+
     private async showPlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = true;
@@ -1271,6 +1292,8 @@ export class TrackList extends LitElement implements SelectionHost {
     }
 
     private closePlaylistSubmenu() {
+        this.clearSubmenuCloseTimer();
+
         if (!this.playlistSubmenuOpen) return;
 
         this.playlistSubmenuOpen = false;
@@ -1672,25 +1695,32 @@ export class TrackList extends LitElement implements SelectionHost {
               <div class="context-menu-panel">
                 <wa-dropdown-item
                   @click=${() => this.onContextMenuAction('play')}
+                  @mouseenter=${() => this.closePlaylistSubmenu()}
                 >
                   <wa-icon slot="icon" name="play"></wa-icon>
                   Play
                 </wa-dropdown-item>
                 <wa-dropdown-item
                   @click=${() => this.onContextMenuAction('add-to-queue')}
+                  @mouseenter=${() => this.closePlaylistSubmenu()}
                 >
                   <wa-icon slot="icon" name="plus"></wa-icon>
                   Add to Queue
                 </wa-dropdown-item>
                 <wa-dropdown-item
                   @click=${() => this.onContextMenuAction('play-next')}
+                  @mouseenter=${() => this.closePlaylistSubmenu()}
                 >
                   <wa-icon slot="icon" name="forward-step"></wa-icon>
                   Play Next
                 </wa-dropdown-item>
                 <wa-dropdown-item
                   class="submenu-item"
-                  @mouseenter=${() => this.showPlaylistSubmenu()}
+                  @mouseenter=${() => {
+                        this.clearSubmenuCloseTimer();
+                        void this.showPlaylistSubmenu();
+                    }}
+                  @mouseleave=${this.scheduleSubmenuClose}
                   @click=${(e: Event) => {
                         e.stopPropagation();
                         void this.showPlaylistSubmenu();
@@ -1707,6 +1737,8 @@ export class TrackList extends LitElement implements SelectionHost {
                                   this.onContextMenuAction(
                                       'track-details',
                                   )}
+                              @mouseenter=${() =>
+                                  this.closePlaylistSubmenu()}
                           >
                               <wa-icon
                                   slot="icon"
@@ -1730,11 +1762,17 @@ export class TrackList extends LitElement implements SelectionHost {
       >
         ${this.playlistSubmenuOpen && this.selection.hasSelection
                 ? html`
-              <playlist-picker
-                .filePaths=${this.selection.getSelectedKeysOrdered()}
-                @playlist-action-complete=${this.onPlaylistActionComplete}
-                @click=${(e: Event) => e.stopPropagation()}
-              ></playlist-picker>
+              <div
+                @mouseenter=${() =>
+                    this.clearSubmenuCloseTimer()}
+                @mouseleave=${this.scheduleSubmenuClose}
+              >
+                <playlist-picker
+                  .filePaths=${this.selection.getSelectedKeysOrdered()}
+                  @playlist-action-complete=${this.onPlaylistActionComplete}
+                  @click=${(e: Event) => e.stopPropagation()}
+                ></playlist-picker>
+              </div>
             `
                 : nothing}
       </wa-popup>