✔ ✔ Untermenü hover soll Hauptmenüpunkt eingefärbt lassen

[Johnnii360]

Servus zusammen!

Stehe gerade vor einem kleine Problem, das ich irgendwie nicht gelöst bekomme. Die einzige Lösung scheint mit evtl. mit »onmouseover« gelöst werden zu können. Allerdings würde ich das lieber gerne mit CSS lösen. Ich habe schon einiges an Kombinationen ausprobiert, bin jedoch nicht zum gewünschten Ergebnis gekommen.

Hier habe hier dieses Menü:

<nav id="container-menue">
    <div class="menuepunkt">
        <button class="menuepunkt-button">Desk</button>
        <div class="menuepunkt-untermenue">
            <div class="untermenue-menuepunkt">Desktop Info...</div>
        </div>
    </div>
    <div class="menuepunkt">
        <button class="menuepunkt-button">Datei</button>
    </div>
    <div class="menuepunkt">
        <button class="menuepunkt-button">Ansicht</button>
    </div>
    <div class="menuepunkt">
        <button class="menuepunkt-button">Optionen</button>
    </div>
</nav>

Wenn ich jetzt z.B. über »Desk« mit der Maus fahre, wird das Untermenü erfolgreich ausgeklappt und kann auch ausgewählt werden. Bei hover wird der Untermenüpunkt auch erfolgreich eingefärbt. Allerdings geht der Hauptmenüpunkt »Desk« wieder in den Ursprung zurück. Dieser soll aber im hover-Zustand bleiben - also in dem Fall weiße Schrift und schwarzer Hintergrund.

Hier der CSS-Code:

#container-menue {
    height: 22px;
    background-color: white;
    border-bottom: 2px solid black;
    font-family: "Atari ST";
    font-size: 14pt;
}

.menuepunkt {
    display: inline-block;
    margin-left: 30px;
    position: relative;
    white-space: nowrap;
}

.menuepunkt-button {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 2px;
    border: 0;
    background-color: white;
    text-transform: uppercase;
    font-family: "Atari ST";
    font-size: 14pt;
    letter-spacing: 1pt;
}

.menuepunkt-button:hover {
    color: white;
    background-color: black;
}

.menuepunkt-untermenue {
    display: none;
    position: absolute;
    top: 22px;
    border: 2px solid black;
    background-color: white;
    z-index: 1;
}

.menuepunkt:hover .menuepunkt-untermenue {
    display: block;
}

.untermenue-menuepunkt:hover {
    color: white;
    background-color: black;
    cursor: default;
}

Würde mich über Eure Hilfe sehr freuen.

Vielen Dank schon mal im Voraus!

 

[Johnnii360]

Hab's selber rausgefunden. Einfach das hier hinzufügen:

.menuepunkt:hover .menuepunkt-button {
    color: white;
    background-color: black;
}