title: Proper CSS to style nested element
body: <p>I'm working on a CSS dropdown. I would like to be able to add a class <code>active</code> to list elements in my dropdown to show the particular item is the current selection. The problem is, I cannot get the text colour to change. The background does, but not the text...</p>
  
  <p><img src="https://i.stack.imgur.com/5AYrC.png" alt="enter image description here"></p>
  
  <p>Demo: <a href="http://jsfiddle.net/tMND4/4/" rel="noreferrer">http://jsfiddle.net/tMND4/4/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="dropdown"&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Nice test items&lt;/a&gt;
          &lt;ul class="submenu"&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Sonic Screwdriver&lt;/a&gt;&lt;/li&gt;
                 &lt;li class="active"&gt;&lt;a href="#"&gt;TARDIS&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Long Scarf&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      padding:10px;
  }
  
  .dropdown &gt; li{
      width:200px; /*or anything you want!*/
      color:#333;
      text-decoration:none;
      padding:2px; /*all things wont stick to the side */
  }
  
  .dropdown li a{
      display:block;
      color:#666;
      text-decoration:none;
      padding:5px; /*line it up with sublinks */
  }
  
  .dropdown li .submenu{
      display:none; /*hide submenu*/
  }
  /* child selector to prevent style propagation*/
  .dropdown &gt; li:hover{
      border:1px solid #666;
  }
  
  /* child selector to prevent style propagation*/
  .dropdown &gt; li:hover a {
      padding: 4px; /*reduced padding to compensate for border*/
  }
  
  .dropdown li:hover .submenu{
      display:block; /*display submenu*/
  }
  
  .dropdown li:hover .submenu a{
      display:block;
      padding:5px; /*line it up with links */
  }
  
  .dropdown li:hover .submenu a:hover{
      background: #DDD;
  }
  
  .active{ 
      background:#666;
      color:#FFF;
  }
  </code></pre>