Help with navigation sprite and wp_listpages

Hi help using sprites !

This is the page I’m fixing https://www.blisspleasure.com/products/ice/

The simple sprite code is working ok but i would like to integrate the wp_listpages tag so that current-page active link will work.

codes below:

Html:

<div id="sprite2-container">
    <ul id="sprite2">
        <li><a href="/products/ice" class="icesmall">Ice<span></span></a></li>
        <li><a href="/products/fire" class="firesmall">Fire<span></span></a></li>

    </ul>
</div>

CSS:

#sprite2-container {
	margin: 0 0 0 78px;
	padding: 0;
	height: 63px;
	width: 216px;
	float: left;
}

/*Global Nav Styles*/

 #sprite2-container ul li{
	margin-bottom:0px;

	}

ul#sprite2 {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

ul#sprite2 li a {
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	text-indent: -9000px;
	position: absolute;
	outline: none;
}

ul#sprite2:hover li a{
	background-position: left bottom;
}

ul#sprite2 li a:hover{
	background-position: left center;
}

ul#sprite2 li a.icesmall{
	background-image: url(images/icesmall.jpg);
	height: 63px;
	width: 108px;
	top: 0px;
	left: 108px;
}

ul#sprite2 a.firesmall{
	background-image: url(images/firesmall.jpg);
	height: 63px;
	width: 108px;
	top: 0px;
	left: 0px;
}