changing dropdown text color 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><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;
    }

I edited my post, and added a line of code I found on another answer that did what I wanted. However, I have no idea why it works so if anyone could explain that for me would help me out a lot. — aratna

orangeh0g orangeh0g · Accepted Answer · 2016-06-21T16:41:44

.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>

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.

changing dropdown text color html

2 Answers