title: Exclude element from CSS
body: <p>I have a simple navigation bar. When I hover over one of the items, I animate a line growing underneath it. Now, one of these items in my navigation bar also has a drop down menu. When I hover over those items, they too get underlined. I don't want this, but I'm not sure how to stop it. I tried the not selector, but it didn't do anything. Here's my html and css.</p>
  
  <p>HTML   </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li id="projectdropbox"&gt;&lt;a&gt;Projects &lt;span class="carrot"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;div id="projectlist"&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;Cydeon World&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;PlasmaModz&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;Future "Ping" Pong&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS(I want to exclude these for my drop down):</p>
  
  <pre><code>nav ul li &gt; a {
      position: relative;
  }
  
  nav ul li &gt; a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0.0625em;
      bottom: -0.125em;
      left: 0;
      background-color: #FFF;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s    ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  nav ul li &gt; a:hover:before {
       visibility: visible;
       -webkit-transform: scaleX(1);
       transform: scaleX(1);  
  }
  </code></pre>
  
  <p>Any ideas on how to go about this?</p>