I'm trying to make a background image appear to the side of a nav menu, but whenever I mouseover each link the background image appears that belongs to the last nav link. Can someone tell me how to make it so it will show the image that belongs to the nav link that is being hovered over?

#nav a {
	display: block;
    text-indent: -9999px;

#a a:hover {
	background: url("i/a_o.png") no-repeat;

#b a:hover {
	background: url("i/b_o.png") no-repeat;

#c a:hover {
	background: url("i/c_o.png") no-repeat;
			<li id="a"><a href="/a">A</a><span></span></li>
			<li id="b"><a href="/b">B</a><span></span></li>
			<li id="c"><a href="/c">C</a><span></span></li>
		init : function() {
			nav = document.getElementById('nav');
      		links = nav.getElementsByTagName('li', nav);

			for (var i=0; i<links.length; i++) {
				var info = links[i].lastChild;
				Rezzner.Event.add(links[i], 'mouseover', function() { info.className = 'show'; });
				Rezzner.Event.add(links[i], 'mouseout', function() { info.className = 'hide'; });

			nav.style.display = 'none';
Any help would be greatly appreciated.