title: Styling a dynamic nested UL structure
body: <p>I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.</p>
  
  <p>I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.</p>
  
  <p>Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE&lt;8 compatible</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          This LI should not recieve the hover effect
          &lt;ul&gt;
              &lt;li&gt;
                  A li:hover will place the effect on this LI, 
                  but also the parent LI, since that element is
                  also techincally being hovered.
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>