Aufklappmenü mit CSS: Farben Hintergrund und Links bei Hover

  • Hallo, ich habe mir von nachfolgender Seite ein kleines Aufklappmenü nachgebaut:


    http://www.olivergast.de/blog/…-dropdown-menue-reloaded/


    Mein CSS/HTML sieht beispielhaft so aus:



    Ich hätte nun gerne alle Links (Menü und Untermenü) rot dargestellt. Bei "Hover" sollen der Hintergrund rot und die Links weiß dargestellt werden. Leider verstehe ich nicht wie das funktioniert :/ Wenn ich die Links auf rot stelle, habe ich im Menü eine rote Schrift vor rotem Hintergrund sobald der Mauszeiger über dem Untermenü ist. Weiß u.U. jemand weiter?

    Vielen Dank!

  • Meinst du das so.

    Das mußt du so ändern

    Code
    nav a {
      display: block;
      color: red;
      text-decoration: none;
    }
    nav ul li:hover {
      background:red;
    }

    und das hinzufügen

    Code
    nav ul li:hover a{
      color:white;
    }
  • Sorry, das war missverständlich formuliert. Mit rot habe ich eigentlich dunkelrot gemeint. Das wirkt im Beispiel etwas angenehmer für das Auge. Mit der Ergänzung hat es jetzt noch nicht ganz geklappt. Die Links im Untermenü sollen auch rot (bzw. dunkelrot) dargestellt werden und erst bei "Hover" auf weiß (mit dunkelrotem Hintergrund) umspringen. Momentan ist es ja so, dass Links im Untermenü auch weiß sind.

  • Dann machst du was falsch

    https://codepen.io/basti1012/pen/GRoZrOv

    Wenn sich der Mauszeiger über "Produkte" befindet, sollen "Obst" und "Gemüse" rot dargestellt werden! Derzeit besitzen beide Einträge eine weiße Schrift. Wenn sich der Mauszeiger dann über "Obst" oder "Gemüse" befindet, soll "Obst" bzw. "Gemüse" eine weiße Schrift und einen roten Hintergrund erhalten. Gleichzeitig soll "Produkte" mit weißer Schrift und rotem Hintergrund dargestellt werden, wenn sich der Mauszeiger über "Obst" oder "Gemüse" befindet.

  • bei Produkte und Obst und Gemüse habe ich das mal jetzt geändert.

    Wenn du das bei den anderen Ebenen ( Annanaß und Kartoffeln usw) auch haben willst mußt du da nur ein paar Zeilen zuschreiben.

    Das kannst du ja mal versuchen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!