title: Change CSS dropdown menu color when any child is hovered
body: <p>I have a basic CSS dropdown menu that looks like this: <a href="http://jsfiddle.net/qfTt3/" rel="nofollow">http://jsfiddle.net/qfTt3/</a> (same code below)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="main-navigation"&gt;
                  &lt;li class="active"&gt;&lt;a href='#'&gt;Plans&lt;/a&gt;
                      &lt;ul&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;How it Works&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;About&lt;/a&gt;
                      &lt;ul&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 4&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;Testimonials&lt;/a&gt;
                      &lt;ul&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href='#'&gt;Sub Link 4&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#main-navigation {
      background: #FFF;
      padding: 0;
      margin: 0;
      list-style-type: none;
      height: 100px;
      float: right;
      font-size: 18px;
  }
  
  #main-navigation li {
      float: left;
  }
  
  #main-navigation&gt;li {
      line-height: 100px;
      background-color: #FFF;
      margin-left: 10px;
  }
  
  #main-navigation&gt;li&gt;ul&gt;li {
      line-height: 30px;
      background: #FFF;
      margin-left: 0px;
      border-bottom: 1px solid #999;
      position: relative;
      z-index: 100;
  }
  
  #main-navigation li a {
      padding: 0px 12px;
      display: block;
      text-decoration: none;
      color: #6d6e71;
  }
  
  #main-navigation ul {
      position: absolute;
      left: -9999px;
      top: -9999px;
      list-style-type: none;
      margin: 0;
  }
  
  #main-navigation li:hover {
      position: relative;
      background: #10b794;
  }
  
  #main-navigation li a:hover {
      color: #FFF;
  }
  
  #main-navigation li:hover ul {
      left: 0px;
      top: 100px;
      background: #10b794;
      padding: 0px;
  }
  
  #main-navigation li:hover ul li a {
      padding: 5px;
      display: block;
      width: 168px;
      text-indent: 15px;
      background: #10b794;
  }
  
  #main-navigation li:hover ul li a:hover {
      color: #FFF;
  }
  
  #main-navigation li.active {
      border-bottom: 4px solid #10b794;
      height: 96px;
  }
  </code></pre>
  
  <p>As you can see, the text color changes to white when and individual item is hovered over. What I would like to do is have the text color of both the main <code>&lt;li&gt;</code> as well as the submenu items change to white if any part of that menu/submenu is hovered over. If someone hovers over 'Plans' in the menu, all the submenu links should have white text as well. If this possible with CSS selectors alone or do I need to look into a JS solution?</p>