title: change color of li on hover
body: <p>I want to change color of a li element on hover, </p>
  
  <pre><code>&lt;ul id="sitemap"&gt;
          &lt;li&gt;&lt;a href="#"&gt;a&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;e&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;f&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                   
          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>here is the css code :</p>
  
  <pre><code> #sitemap li:hover{
      background:#eee;
  } 
  </code></pre>
  
  <p>When I hover on any child li of a i.e b,c.. f   it also changes background color of parent(a). How can I change the bg-color of only current li element on hover, there can be li at 3rd level also so what could be the general solution..</p>