diff --git a/src/scss/card.scss b/src/scss/card.scss
index 3a76d388..71e5e0e1 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -48,7 +48,9 @@ frigate-card-loading {
 
 div.main {
   position: relative;
-  overflow: auto;
+
+  // Some elements (such as submenus) may need to extend beyond the card boundary.
+  overflow: visible;
   width: 100%;
   height: 100%;
   margin: auto;
@@ -185,15 +187,20 @@ web-dialog::part(dialog) {
  * Overlay styles
  ****************/
 frigate-card-overlay {
-  z-index: 10;
+  // Higher than the drawer (menu renders over drawer).
+  z-index: 20;
 }
 
 /*******************
  * Menu hover styles
  *******************/
 
+frigate-card-menu {
+  // z-index is within the overlay stacking context.
+  z-index: 1;
+}
+
 frigate-card-menu[data-style*='hover'] {
-  z-index: 20;
   transition: opacity 0.5s ease;
   opacity: 0;
 }
diff --git a/src/scss/drawer-inject.scss b/src/scss/drawer-inject.scss
index bdbd8cf7..94db2960 100644
--- a/src/scss/drawer-inject.scss
+++ b/src/scss/drawer-inject.scss
@@ -25,6 +25,10 @@
 
   // Don't let the drawer exceed 90% of the full width of the relative parent.
   max-width: 90%;
+
+  // Drawer renders behind the menu/status-bar overlay (otherwise the drawer
+  // controls render on top of menu items)
+  z-index: 10;
 }
 
 :host([location='right']) #d {