As you can see when you view this site in IE6 the hover state span tags move from left to right based on the length of the text due to the block not expanding to the size of the list element. Will i need to use an IE hack or is there a simple fix?

http://www.dreamchaser.biz/

Code:
.left{
	float:left;
	margin:10px 0 0 0;
	width:300px;
	text-align:right;
}

.right{
	float:right;
	margin:10px 0 0 0;
	width:300px;
	text-align:left;
}

.right a, .left a{
	display:block;
	background-color:#2E1D27;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	font-size:150%;
	padding:5px;
	text-decoration:none;
}

.right a:hover, .left a:hover{
	position: relative;
	background-color:#2E1D27;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

.right a span, .left a span{
	display:none;
	z-index:0;
}

.right a:hover span{
	position: absolute; top: 0; right: 306px;
	display:block;
	background-color:#2E1D27;
	z-index:100;
	width:195px;
	padding:5px;
	text-align:left;
	font-size:50%;
	font-family:Arial, Helvetica, sans-serif;
}

.left a:hover span{
	position: absolute; top:0; left: 306px;
	display:block;
	background-color:#2E1D27;
	position:absolute;
	z-index:100;
	width:195px;
	padding:5px;
	text-align:left;
	font-size:50%;
	font-family:Arial, Helvetica, sans-serif;
}