Gandalf: Links in CSS-Infobox vs. IE

Beitrag lesen

Hallo zusammen,

ich brüte schon seit Stunden über einem Problem und komme trotz google und Suche hier nicht mehr weiter.

Also: Ziel ist ein Menü wie auf der HP von Fußball-Drittligist SV Wehen-Wiesbaden: http://www.svwehen-wiesbaden.de aber ohne jeglichen Einsatz von Javascript.

Nach einigem Suchen habe ich es dann auf Basis einer CSS-Infobox (wie hier http://aktuell.de.selfhtml.org/artikel/css/infobox/) probiert und nachdem ich die Links in einer Tabelle sortiert hatte ging das bei Firefox und Chrome auch problemlos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
	"http://www.w3.org/TR/html4/strict.dtd">  
<html lang="de">  
<head>  
<title>Infobox</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
#box a {  
font-family: Verdana;  
font-weight: bold;  
color:#000000;  
text-decoration:none;  
}  
  
#box a:hover {  
color:red;  
}  
  
#box a span {display:none;}  
  
#box a:hover span {  
position:absolute; top:30px; left:7px; z-index:3;  
display:block;  
width:810px;  
color:black;  
background:#808080;}  
-->  
</style>  
</head>  
<body>  
  
<div id="box">  
	<a href="#">MENUPUNKT1  
		<span>  
			<table>  
			<tr>  
				<td>  
					<a href="#">Link1</a>  
				</td>  
			</tr>  
			<tr>  
				<td>  
					<a href="#">Link2</a>  
				</td>  
			</tr>  
			</table>  
		</span>  
	</a>  
</div>  
  
</body>  
</html>

Nur der IE(9) blendet leider die Box sofort wieder aus sobald der Mauszeiger den Menüpunkt verlässt, keine Chance an die Links zu kommen. Kann man dem IE das irgendwie beibringen? Oder ist der Ansatz mit der Infobox sowieso grundlegend verkehrt (dafür gedacht ist sie ja eigentlich nicht) und es gibt bessere Möglichkeiten ohne JS?

Bin für jegliche Ideen dankbar.