Using this site, I'm trying to use these to display a quick description for my external links section. It works great in Firefox, displays in Opera but won't go away when I move the mouse away and won't work at all in IE. Since all browsers work fine with it on madaboutstyle I guess I'm missing something really stupid but for the life of me I can't figure out what. I even tried copy-pasting the CSS and anchor but it still wouldn't work

Here's my code
Code:
 # css
 body {
 	background: #fff url( img/background.gif ) repeat;
 	color: #808080;
 	font: 12px Tahoma, Arial, sans-serif;
 	margin: 0;
 	padding: 0;
 }
 
 a {
 	color: #808080;
 	text-decoration: none;
 }
 
 a.external {
 	position: relative;
 	color: #808080;
 	text-decoration: none;
 	z-index: 24;
 }
 
 a.external span { display: none; }
 
 a.external:hover { z-index: 25; }
 
 a.external:hover span {
 	display: block;
 	position:absolute;
 	top: 1.5em;
 	left: -2em;
 	padding: 1em;
 	border: 2px #ac83ff solid;
 	background: white;
 	-moz-border-radius-bottomleft: 0px;
 	-moz-border-radius-bottomright: 10px;
 	-moz-border-radius-topleft: 10px;
 	-moz-border-radius-topright: 0px;
 	-moz-opacity: .77;
 }
 
 # html
 <div id="right">
 	<h2>LINKS</h2>
 	<ul id="links">
 		<li><a href="#">Home</a></li>
 		<li><a href="#">Something</a></li>
 		<li><a href="#">Something else</a></li>
 		<li><a href="#">More stuff</a></li>
 		<li style="padding-top: 2em;"><a href="http://www.toniallen.com" class="external">
 			Toni Allen
 			<span>Test</span>
 		</a></li>
 		<li><a href="http://www.platinum-central.com" class="external">Gavin Benda</a></li>
 		<li><a href="http://www.frozentoast.com" class="external">Andy Whats-his-name</a></li>
 	</ul>
 </div>
Any ideas on how I could get this to work would be great

Thanks