hover buttons background image change not working

Question

Background

I'm trying to make a menu, you hover over the button and the background image shifts its Y position to give you the 'over' effect for each button.

CSS

.menu {float: left;}
.menu span {display: none;}
.menu a {display: block; margin: 10px; width: 200px; height: 50px;}
#itemA {background: url('images/btnA.png') no-repeat 0 0;}
#itemB {background: url('images/btnB.png') no-repeat 0 0;}
#itemC {background: url('images/btnC.png') no-repeat 0 0;}
#itemD {background: url('images/btnD.png') no-repeat 0 0;}

HTML

<div class="menu">
<a id="itemA" href="#"><span>AAAAA</span></a>
<a id="itemB" href="#"><span>BBBBB</span></a>
<a id="itemC" href="#"><span>CCCCC</span></a>
<a id="itemD" href="#"><span>DDDDD</span></a>
</div>

Problem

why do none of these work?

/*** - test A     
a.menu:link {background-position: 0 -51px;}
a.menu:visited {display: block; margin: 10px; width: 200px; height: 32px;}
***/

/*** - test B     
a.menu:hover {background-position: 0 -51px;}
***/

/*** - test C    
.menu a:hover {background-position: 0 -51px;}
***/

/*** - test D     
.menu:hover a {background-position: 0 -51px;}
***/

/*** - test E     
a:hover .menu {background-position: 0 -51px;}
***/

Notes

images are 200x101px (50px high with a 1px seperator)

(edit) I know the following works, but im not trying to do it liek that

#itemA {background-image: url('images/btnA.png');}
#itemB {background-image: url('images/btnB.png');}
#itemC {background-image: url('images/btnC.png');}
#itemD {background-image: url('images/btnD.png');}

Question

why do none of these work, should any of them work, is there a solution im missing?

thanks in advance!

Answer 1

Use background-image instead:

#itemA {background-image: url('images/btnA.png');}
#itemB {background-image: url('images/btnB.png');}
#itemC {background-image: url('images/btnC.png');}
#itemD {background-image: url('images/btnD.png');}

Or change your hover:

#itemA:hover, #itemB:hover, #itemC:hover, #itemD:hover {
    background-position: 0 -51px;
}

The problem with your code is that #itemA is more specific than .menu a.menu:hover or any other combination you have on your tests. So even if you specify the hover effect the browser will ignore it unless you remove the background position that you use on background or make your hover clause more specific.