Having a little trouble with a dis-jointed CSS rollover.
The link:
http://www.pressdat.com/mtw2/Mercs/M...ossbowmen.html

I'm using <a href="#"></a> for the rollover with a <span>.
Everything works just fine as long as none of the links are actually clicked, which is bound to happen. If they are clicked, it breaks. It's like the background image gets stuck in the "rollover" state at background-position: 0 0.

my css:
Code:
#navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
height: 300px;
float: left;
position: relative;
top: 0px;
left: -5px;
width: 160px;
 }



#navlist li {
list-style: none;
margin: 3px 0 0 10px;
display: block;
position: relative;
top: 0px;
left: 3px;
width: 156px;
text-align: center;
font-style: italic;
}

#navlist li a {
font: bold 1.2em/1.6em Arial, Helvetica, sans-serif;
background: #fff;
text-decoration: underline;
 }

#navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus {
	color: #ff0000;
	visibility: visible; }

#navlist li a span {
visibility:hidden;
display:block;
position: absolute;
color:#000;
width: 411px;
height: 250px;
}



#defaultImage {
visibility:visible;
display:block;
position: absolute;
margin: 0 0 0 200px;
width: 411px;
height: 250px;
background-image:url(../Mercs/images/regions/base.jpg) ;
}



#navlist li a:hover span,
#navlist li a:active span,
#navlist li a:focus span {
	visibility:visible;
    background-image:url(../Mercs/images/regions/rollover_16_BIG.png) ;
    top: -20px; left: 191px;
	display: block;
	}



#navlist li a:hover span#scot { background-position: 0 0; ; }
#navlist li a:hover span#ire  { background-position: 0 -250px;   }
#navlist li a:hover span#wales { background-position: 0 -500px;   }
#navlist li a:hover span#n_germany { background-position: 0 -750px; }
#navlist li a:hover span#s_germany { background-position: 0 -1000px; }
#navlist li a:hover span#n_italy { background-position: 0 -1250px;  }
#navlist li a:hover span#e_balkans { background-position: -411px -250px; }
#navlist li a:hover span#e_greece { background-position: -411px -500px; }
#navlist li a:hover span#anatolia { background-position: -411px -750px; }

My HTML for the effected part:
Code:
<div id="defaultImage">
<img src="http://www.sitepoint.com/forums/images/regions/base.jpg"></div>


<ul id="navlist">
<li class="reg_head">Available in:</li>
<li><a href="#">Scotland <span id="scot"></span></a>
<br />
<a href="#">Ireland <span id="ire"></span> </a>
<br />
<a href="#">Wales <span id="wales"></span></a>
<br />
<a href="#">Northern Germany <span id="n_germany"></span></a>
<br />
<a href="#">Southern Germany <span id="s_germany"></span></a>
<br />
<a href="#">Eastern Balkans <span id="e_balkans"></span></a>
<br />
<a href="#"><span id="wales"></span></a>
</li>
</ul>
<br clear="all" />
What can I do to prevent this?