悬停按钮背景图像更改不工作

背景

我正在做一个菜单,你将鼠标悬停在按钮上,背景图像移动其Y位置,为每个按钮提供“过”效果。

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>

问题

为什么这些都不起作用?

/*** - 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;}
***/

笔记

图像为200x101px(50px高,带1px分隔器)

(编辑)我知道下面的作品,但我并不想这么做。

#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');}

问题

为什么这些都不起作用,如果它们中的任何一个起作用,我是否遗漏了一个解决方案?

事先谢谢!