a:hover with image in <UL> not behaving

I have posted this on some other forums but not getting help so need to expand audience.

I can't get the background to change images, only the <LI> text bg changes. I tried making the .ul and .li separate but that messed other things up.
[CODE]
ul.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 0px;
list-style-type: none;
text-indent: 40px;
}
#leftside li a, #leftside li a:visited, #leftside li a:active { color: #FFF; text-decoration: none; }
#leftside ul a:hover, leftside li a:hover { color: #404040; text-decoration: none; background-image: url(images/left_menu-bg_ovr.jpg); }

HTML


<ul class="leftside">
<li><a href="#">Rooms</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Siteseeing</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


[\CODE]
The hover works but only in the <LI> and not the background for the whole <UL>.


Thanks in advance for your help!

You have defined: <ul class="leftside">, so all references to leftside must be .leftside, not #leftside. Plus there seems to be a couple of other problems. See if the following works:


.leftside li a {
font: bold 11px Helvetica, sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 0px;
list-style-type: none;
text-indent: 40px;
}

.leftside li a, .leftside li a:visited, .leftside li a:active {
color: #FFF;
text-decoration: none;
}

.leftside li a:hover {
color: #404040;
text-decoration: none;
background-image: url(images/left_menu-bg_ovr.jpg);
}

Thanks but that isn't doing it either...
Here's the test site off the client domain:
Test link (http://www.paddynarayan.com/~motel/)
Notice how only the BG of the menu text changes and not the whole BG

Here are the 2 BG images starting with the default
http://www.paddynarayan.com/~motel/images/left_menu-bg.jpg
and here's the OVR
http://www.paddynarayan.com/~motel/images/left_menu-bg_ovr.jpg

THANKS!

Just to restate the problem - background-image is being changed on :hover, but the overlying text within <a> tags is limiting the new b/g image from fully showing through when that happens.

The problem seems to be eliminated if 'li a:hover' is replaced with 'li:hover', but of course that will defeat IE6, which needs :hover to be applied to anchor tags.

See if the following alternative works:
1. Add a suitable width to the li (in accordance with the b/g image size).
2. Add 'display: block' to the 'li a:hover'.



.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
/* adjust width to suit b/g image */
width: 150px;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 0px;
list-style-type: none;
text-indent: 40px;
}

.leftside li a, .leftside li a:visited, .leftside li a:active {
color: #FFF; text-decoration: none;
}

.leftside li a:hover {
display: block;
color: #404040;
text-decoration: none;
background: url(images/left_menu-bg_ovr.jpg) no-repeat;
}