title: Using :hover pseudo class in nested lists
body: <p>I am trying to get the effect of adding certain extra values to list items when they are hovered. I am very close, but when using nested lists, the parent thinks it's hovered as well as the child.</p>
  
  <p>This is my simple test case. The desired result is that each item will show the span if, and only if, it is hovered. Hovering over 'Test 5.3' should NOT result in 'Test 5' having the span shown.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Testing list :)&lt;/title&gt;
  &lt;style type="text/css"&gt;
  li span {
      visibility: hidden;
  }
  li:hover &gt; span {
      visibility: visible;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;ul&gt;
      &lt;li&gt;Test 1&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 2&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 3&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 4&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 5&lt;span&gt; - Edit&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;Test 5.1&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Test 5.2&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Test 5.3&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Test 5.4&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Test 5.5&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Test 6&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 7&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 8&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Test 9&lt;span&gt; - Edit&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Link to version online to save you copying out the above: <a href="http://matdiesel.leadhoster.com/test.html" rel="nofollow">test.html</a></p>
  
  <p>Thanks</p>