title: change background image of li on an a:hover
body: <p>I have a menu:</p>
  
  <pre><code>&lt;div id=menu&gt;
     &lt;ul=navigation&gt;
       &lt;li&gt;&lt;a href=&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)</p>
  
  <p>I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows. </p>
  
  <p>Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript. </p>
  
  <p>Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.</p>
  
  <p>Thanks in advance for any advice/help/suggestions.</p>