Ich kriege es nicht hin. Wenn ich auf Seite X bin und hover oben im Menü auf das Submenü von Seite X, dann hat es andere Farben, als alle anderen Submenüs. Wo kann ich das umstellen? Ich finde es nicht...
CSS:
nav>ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid #79B3E5;
border-left: none;
border-right: none;
font-family: Arial;
padding: 0;
font-size: 1.5rem;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav>ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #79B3E5;
}
nav li[aria-current] a {
background-color: #79B3E5;
color: white;
font-family: Arial;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus {
nav li[aria-current] a:hover {
background-color: #79B3E5;
color: white;
}
/* submenu navigation links */
nav > ul > li {
position: relative;
}
nav .submenu {
position: absolute;
visibility: hidden;
width: 100%;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
visibility: visible;
height: auto;
background-color: white;
border-right: 1px solid #79B3E5;
border-left: 1px solid #79B3E5;
border-top: 1px solid #79B3E5;
}