[6.0] Add CSS to Cassiopeia for the refactored mod_menu (#45930)

* Add CSS for the corrected mod_menu

* Corrected focus

* Corrected z-index

Author: drmenzelit

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 {

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;
+  }
+}
+