Ändern Dropdown-Text Farbe HTML

Question

Ich beginne gerade zu lernen, HTML & CSS und haben begonnen, eine einfache Website zu lernen, im laufenden Betrieb.

Ich versuche ein Dropdown-Menü zu erstellen, das geöffnet wird, wenn der Benutzer den Mauszeiger über einen Link bewegt (dropbtn in meinem Code). Ich möchte, dass sich die Hintergrundfarbe und die Textfarbe der Schaltfläche ändern, wenn das Dropdown-Menü geöffnet ist (wenn der Benutzer den Mauszeiger über die Schaltfläche oder eine der Dropdown-Optionen bewegt). Als Referenz können Sie http://www.cibc.ca betrachten. Ihre Navigationsleiste ist kastanienbraun/rot, aber wenn der Benutzer den Mauszeiger über eine Schaltfläche bewegt, wird die Farbe der Schaltfläche grau (um mit dem Dropdown-Menü übereinzustimmen) und die Textfarbe wechselt zu kastanienbraun. Die Farben bleiben gleich, wenn der Benutzer zu den Dropdown-Optionen wechselt, und werden erst wieder zurückgesetzt, wenn sich der Cursor vollständig aus dem Dropdown-Menü bewegt.

Bisher ist es mir gelungen, das Menü so zu erstellen, dass es geöffnet wird und die Hintergrundfarbe und Textfarbe der Schaltfläche sich ändert, wenn der Benutzer über die Schaltfläche fährt. Wenn der Benutzer den Cursor jedoch von der Schaltfläche zu einer der Dropdown-Optionen bewegt, wird die Farbe des Texts der Schaltfläche wieder auf das ursprüngliche Ghostwhite zurückgesetzt, sodass der Text nicht angezeigt werden kann. Ich suche nach Möglichkeiten, um die Farben zu ändern, bis das Dropdown-Menü geschlossen ist.

Dies ist mein erster Beitrag auf stackoverflow, also vergib mir für irgendwelche Probleme mit der Post.

BEARBEITEN: Hinzufügen dieser Codezeile, die ich zufällig auf einer anderen Frage gefunden habe, funktionierte. Leider weiß ich nicht, warum es funktioniert, also würde eine Erklärung geschätzt werden.

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;} 

HTML:

<div> 
<ul id = "menu"> 
    <li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li> 
    <li><a href = "website1.html">Projects</a></li> 
    <li><a href = "http://www.twitter.com">Community Involvement</a></li> 

    <li class = "dropdown">  
     <a class = "dropbtn" href = "#">Social Media</a> 
     <div class = "dropdown-content"> 
      <a href = "http://www.facebook.com">Facebook</a> 
      <a href = "http://www.twitter.com">Twitter</a> 
      <a href = "http://www.instagram.com">Instagram</a></div> 
    </li> 

    <li><a href = "http://www.twitter.com">Join Our Team</a></li> 
    <li><a href = "http://www.twitter.com">FAQ</a></li> 
    <li><a href = "http://www.twitter.com">About Us</a></li> 
    <li><a href = "http://www.twitter.com">Contact Us</a></li> 
</ul> 

CSS:

ul#menu li.dropdown .dropbtn{ 
     display:inline-block; 
     color:ghostwhite; 
     text-decoration:none; 
     text-align:center; 
     padding:14px 16px; 
    } 

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{ 
     background-color:ghostwhite; 
     color:dodgerblue; 
     } 
     .active{ 
      background-color:ivory; 
     } 

ul#menu li.dropdown{ 
     display:inline-block; 
     } 
ul#menu .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: ghostwhite; 
     min-width: 160px; 
    } 
ul#menu .dropdown-content a{ 
     color:dodgerblue; 
     padding: 12px 16px; 
     text-decoration:none; 
     display:block; 
     text-align:left; 
    } 
ul#menu .dropdown .dropdown-content a:hover{ 
     background-color: skyblue; 

    } 
ul#menu .dropdown:hover .dropdown-content { 
     display: block; 
    } 

Answer 1

.dropdown .dropbtn { 
 
    display: inline-block; 
 
    color: ghostwhite; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: ghostwhite; 
 
    color: dodgerblue; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropdown-content a { 
 
    background-color: skyblue; 
 
    background-color: ghostwhite; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: ghostwhite; 
 
    min-width: 160px; 
 
} 
 

 
.dropdown-content a { 
 
    color: dodgerblue; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
}

<div> 
 
    <ul id="menu"> 
 
    <li><a class="active" style="color:dodgerblue" href="http://www.google.ca">Home</a> 
 
    </li> 
 
    <li><a href="website1.html">Projects</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">Community Involvement</a> 
 
    </li> 
 

 
    <li class="dropdown"> 
 
     <a class="dropbtn" href="#">Social Media</a> 
 
     <div class="dropdown-content"> 
 
     <a href="http://www.facebook.com">Facebook</a> 
 
     <a href="http://www.twitter.com">Twitter</a> 
 
     <a href="http://www.instagram.com">Instagram</a> 
 
     </div> 
 
    </li> 
 

 
    <li><a href="http://www.twitter.com">Join Our Team</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">FAQ</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">About Us</a> 
 
    </li> 
 
    <li><a href="http://www.twitter.com">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</div>

Die Der Schlüssel ist, dass Ihre Hover-Effekte auf dem ".dropdown" basieren müssen, da dies der Container für alle Kinder ist, auf die Sie den gleichen Effekt haben möchten. Ich änderte die CSS etwas und entfernte etwas von der nicht benötigten Selektorspezifität.

Answer 2

Wenn Sie den CSS-Block unten einfach hinzufügen, sollte Ihr Problem behoben sein. Die wichtige Verzögerung verleiht diesem spezifischen Stil mehr Gewicht, wenn er aktiv ist.

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{ 
    background-color:ghostwhite; 
    color:dodgerblue!important; /* Add !important here */ 
} 

Dies würde jedoch nicht erforderlich, wenn Ihre Stile in der richtigen Reihenfolge sind und wie orangeh0g angegeben, sollten sie die richtigen Selektoren sowie haben. CSS wird von oben nach unten kompiliert/gelesen, was bedeutet, dass, wenn ein Stil am oberen Rand des Stylesheets hinzugefügt wird, alles nach Bedarf überschrieben werden kann, wenn Sie dies wünschen.