title: CSS List Hover SubItems
body: <p>I have a fiddle here <a href="http://jsfiddle.net/13v2fcjf/" rel="nofollow">http://jsfiddle.net/13v2fcjf/</a>
  It has a basic html document with lists and sublists</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Item 1
          &lt;ul&gt;
              &lt;li&gt;Sub Item 1&lt;/li&gt;
              &lt;li&gt;Sub Item 2&lt;/li&gt;
              &lt;li&gt;Sub Item 3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li&gt;Item 4
          &lt;ul&gt;
              &lt;li&gt;Child 1&lt;/li&gt;
              &lt;li&gt;Child 2&lt;/li&gt;
              &lt;li&gt;Child 3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I'm using the following css -</p>
  
  <pre><code>li:hover {
      background: #f7f7f7;
  }
  </code></pre>
  
  <p>When I hover on an li item with a subitem(s), all the subitems also get highlighted. This is not desirable. I want only the list item on which the user's hovering to be highlighted. How can I achieve this ?</p>
  
  <p>Also, I tried using the <code>:not</code> selector but it doesn't work.</p>