title: How to change background colour of individual list items of a nested list upon hover (and to full menu width)
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;style type='text/css'  media='all'&gt;
          #menu {width: 50%;}
          .high {background: #0F0;}
          .list-item :hover {background: #000;}
  
          /* non essential styles */
          .list-item a{text-decoration: none;}
          .list-item :hover a{color: #FFF;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="menu" &gt;
          &lt;ul&gt;
              &lt;li class="list-item"&gt;
                  &lt;div class="level-0 high" id="P0"&gt;
                      &lt;a href="#"&gt;P0&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;ul&gt;
                      &lt;li class="list-item"&gt;
                          &lt;div class="level-1" id="C0-P0"&gt;
                              &lt;a href="#"&gt;C0-P0&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="list-item"&gt;
                          &lt;div class="level-1" id="C1-P0"&gt;
                              &lt;a href="#"&gt;C1-P0&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="list-item"&gt;
                  &lt;div class="level-0" id="P1"&gt;
                      &lt;a href="#"&gt;P1&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;ul&gt;
                      &lt;li class="list-item"&gt;
                          &lt;div class="level-1" id="C0-P1"&gt;
                              &lt;a href="#"&gt;C0-P1&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="list-item"&gt;
                          &lt;div class="level-1" id="C1-P1"&gt;
                              &lt;a href="#"&gt;C1-P1&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Structure:<br>
  P0<br>
  __ C0-P0<br>
  __ C1-P0<br>
  P1<br>
  __ C0-P1<br>
  __ C1-P1</p>
  
  <p>Currently I am unable to select and change background (upon hover) of Child items individually.<br>
  However if I try to use <code>first-child</code> selectors - I am able to select each list item individually. But -<br>
  then the parent's selections are limited to only the anchor width and not the full menu width.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/Uj13/4FZsa/" rel="nofollow">JSFilldle</a></p>