diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
index d746929b590c6..46c4b0e731867 100644
--- a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
@@ -83,6 +83,34 @@
       display: flex;
       flex: 1 1 0%;
       flex-direction: row;
+      :where(.mod-menu__sub:not(.mod-menu__sub *)) {
+        position: absolute;
+        top: 100%;
+        z-index: 1001;
+        display: block;
+        min-width: 12rem;
+        padding: 0;
+        margin: 0;
+        background-color: #fff;
+      }
+    }
+
+    @include media-breakpoint-down(lg) {
+      &.mod-list > li > a:hover {
+        text-decoration: underline;
+      }
+      .mod-menu__sub {
+        a,
+        span {
+          color: $white;
+        }
+      }
+    }
+
+    .mod-menu__sub {
+      a:hover {
+        text-decoration: underline;
+      }
     }
 
     > li {
diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_modifiers.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_modifiers.scss
index b310f02a3ffdf..59ae922946b52 100644
--- a/build/media_source/templates/site/cassiopeia/scss/blocks/_modifiers.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_modifiers.scss
@@ -328,3 +328,16 @@
     }
   }
 }
+
+.mod-menu a,
+.mod-menu button {
+  color: var(--link-color);
+  @at-root .container-header & {
+    color: currentColor;
+  }
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+