Menu rollovers with multiple images??

HELP Please….!

Im trying to get my menu to hover with each link as a different image.

Ive got 7 menu items that includes home, about and contact…

I know that each menu item will have its own dynamic class for eg(current_page_item-20), but I am struggling with the css.. This is my current theme css for the menu..

/*Navbar */
#nav,  #nav ul {	list-style: none; line-height: 1;	}
 #nav a, #nav a:hover {text-decoration: none; border:none; font-size:11px;	}
 #nav li { display:block;	float:left;	list-style:none; margin-left:5px;	}
 #nav li a,  #nav li a:visited {color:#fff;  display:block; font-weight:bold;line-height:7px;padding:10px;}
 #nav li a:active, li.current_page_item	a, #home li.on, #nav li a:hover  {	background:#58b3f9; color: #fff;	text-decoration:none;padding:10px;	display:block;	}

In the above css you find li.current_page_item a which is how the current menu displays the hover states right?

Now, I have the following code that would do the rollover in pure css..

#home_button {
background:transparent url(img/buttons/home.jpg) no-repeat scroll 0 0;
display:block;
float:left;
height:44px;
width:87px;
}
#home_button:hover {
background-position:0 -44px;
}
#home_button span {
display:none;
}

What this is doin is its displaying an image that has a height of 88px, but only showing the top half, and when you hover over the image the image is shifted upwards showing the bottom half which is the overstate.

But now I need to have a different image for each menu item. Could someone please help me with the css for doing this?

Much appreciation to who replies!!
Thanx!!