change background image of li on an a:hover

Question

I have a menu:

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)

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.

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.

Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.

Thanks in advance for any advice/help/suggestions.

Answer 1

From what I gather you cannot do what you are after in the way you have described it.

However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing

li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"

li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability