一个css的问题

刚学DIV+CSS布局,在做一个导航的时候,需要这样的效果,已有图两张,一张是鼠标没点在链接上的背景图,另外一张是鼠标点上去变换的图象,不知道怎么设置的,效果变成这样了,背景和字一样大小,我设置的是12px,字的外围都没有背景,背景图在字的内部背景,我想要达到的是一个图原始尺寸大小的方格,里面放12px大小的字.我的代码是这样的:
html:
<div id="menu">
       <ul>
   <li><a href="#">首页</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">6</a></li>
   <li><a href="#">7</a></li>
   </ul>
</div>
css:
#menu {margin:0px;float:left;}
#menu ul{}
#menu ul li{float:left;margin:0px 5px;
text-align:center;
vertical-align:middle;
width:92px;height:32px;
}
#menu ul li a {
background:url(dh_1.jpg) no-repeat;}
#menu ul li a:hover{
background:url(dh_2.jpg) center no-repeat;
}
请帮帮忙,谢谢!

#menu ul li a {
background:url(dh_1.jpg) no-repeat;}

这里 的a 要把宽度 设置上 才行 比如
#menu ul li a {
background:url(dh_1.jpg) no-repeat;width:65px}
看你图片的大小拉

看不明白