title: Change parent element background position on child hover
body: <p>I'm trying to create a navigation menu which would change parent <code>div</code> background when hover on child <code>li</code> item. Actually, I just want to move the parent background.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div id="headerNav"&gt;
      &lt;li class="navHome"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navServices"&gt;&lt;a href="services.php"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navFaq"&gt;&lt;a href="faq.php"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navGallery"&gt;&lt;a href="gallery.php"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navContact"&gt;&lt;a href="contact-us.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I have the <code>#headerNav</code> showing default background. When you hover over Services, I want move <code>#headerNav</code> background image 75px up. When you hover over FAQ, I want to move <code>#headerNav</code> background image 150px up, etc.</p>
  
  <p>Can anyone help me?</p>