title: changing dropdown text color html
body: <p>I'm just starting to learn HTML &amp; CSS and have begun building a simple website to learn on the fly. </p>
  
  <p>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 <a href="http://www.cibc.ca" rel="nofollow">http://www.cibc.ca</a>. 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.</p>
  
  <p>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. </p>
  
  <p>This is my first post on stackoverflow so forgive me for any issues with the post.</p>
  
  <p><strong>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.</strong></p>
  
  <pre><code>#nav li:hover &gt; a, #nav li:hover &gt; a:link, #nav li:hover &gt; a:visited{color:white;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;ul id = "menu"&gt;
      &lt;li&gt;&lt;a class = "active" style = "color:dodgerblue" href = "http://www.google.ca"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "website1.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "http://www.twitter.com"&gt;Community Involvement&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class = "dropdown"&gt;    
          &lt;a class = "dropbtn" href = "#"&gt;Social Media&lt;/a&gt;
          &lt;div class = "dropdown-content"&gt;
              &lt;a href = "http://www.facebook.com"&gt;Facebook&lt;/a&gt;
              &lt;a href = "http://www.twitter.com"&gt;Twitter&lt;/a&gt;
              &lt;a href = "http://www.instagram.com"&gt;Instagram&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href = "http://www.twitter.com"&gt;Join Our Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "http://www.twitter.com"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "http://www.twitter.com"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "http://www.twitter.com"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>
  CSS:</p>
  
  <pre><code>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;
      }
  </code></pre>