title: CSS, only affect the top lis of a ul?
body: <p>I have a nested UL navigation list, with ul's contained inside some other li elements. here's the mark up:</p>
  
  <pre><code>&lt;ul class="navigation"&gt;
    &lt;li&gt;&lt;a href="#"&gt;No Chidren&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;With Chilren&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried styling it with some of the following CSS declarations:</p>
  
  <pre><code>.navigation { 
   //stylings
  }
  
  .navigation li{ 
   //stylings
  }
  
  .navigation li a{ 
   //stylings
  }
  
  .navigation li a:hover{ 
   //stylings
  }
  </code></pre>
  
  <p>but the .navigation li affects all of the list elements, including the children. is there a way to target the lis so that the styles are only applied to the top-level ones, and not the children?</p>