changing dropdown text color html - html

Question

I'm just starting to learn HTML & CSS and have begun building a simple website to learn on the fly.
I'm trying to build a dropdown menu that opens when the user hovers over a link (dropbtn in my code). I want the background-color and text color of the button to change when the dropdown menu is open (when the user is hovering over either the button or any of the dropdown options). For reference, you could look at http://www.cibc.ca. Their navbar is maroon/red, but once the user hovers over a button, the button color switches to grey (to match the dropdown menu) and the text-color changes to maroon. The colors stay the same when the user moves down to the dropdown options, and only reverts back once the cursor moves off the dropdown menu entirely.
So far, I've managed to create the menu such that it opens and the background-color and text color of the button change when the user hovers over the button. However, when the user moves the cursor off the button and onto one of the dropdown options, the color of the text of the button reverts back to its original ghostwhite, and so it is impossible to see the text. I'm looking for ways to keep the colors changed until the dropdown menu is closed.
This is my first post on stackoverflow so forgive me for any issues with the post.
EDIT: Adding this line of code which I happened to find on another question worked. Unfortunately, I don't know why it works, so an explanation would be appreciated.
#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>Projects</li>
<li>Community Involvement</li>
<li class = "dropdown">
<a class = "dropbtn" href = "#">Social Media</a>
<div class = "dropdown-content">
Facebook
Twitter
Instagram</div>
</li>
<li>Join Our Team</li>
<li>FAQ</li>
<li>About Us</li>
<li>Contact Us</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>Projects
</li>
<li>Community Involvement
</li>
<li class="dropdown">
<a class="dropbtn" href="#">Social Media</a>
<div class="dropdown-content">
Facebook
Twitter
Instagram
</div>
</li>
<li>Join Our Team
</li>
<li>FAQ
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
The key is your hover effects have to be based on the ".dropdown" because this is the container for all the children you want to have the same effect on. I changed the css around a bit and removed some of the unneeded selector specificity.

Answer 2

Simply adding !important to the CSS block below should resolve your issue. The !important deceleration puts more weight on that specific style when active.
ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
background-color:ghostwhite;
color:dodgerblue!important; /* Add !important here */
}
However, this wouldn't be necessary if your styles are in the correct order and as orangeh0g stated, they should have the correct selectors as well. CSS is compiled/read descending from the top to bottom of the document, which means that if a style is added at the top of the style sheet anything can override it after, if you choose to do so.