div per :hover durch überfahren eines Links sichtbar machen

[Marco]

Hallo Community!

Der Titel klingt erstmal etwas konfus, lässt sich aber leicht nachvollziehen, wenn man folgende Seite betrachtet: http://www.thestyleworks.de

Wie oben das Menü, welches zusätzliche Informationen zu dem entsprechenden Link innerhalb von span-Blöcken bereit stellt, möchte auch ich das handhaben. Das Problem ist mal wieder der IE.

Beim Überfahren dieses Links hier

  
<li id="panela">  
 <a href="#" class="menu"  
  Startseite  
 <div class="hover_text">Willkommen</div>  
 </a>  
</li>  

soll die div-Box sichtbar werden. Das CSS dazu sieht folgendermaßen aus:

  
.hover_text {  
display: none;  
position: absolute;  
width: 240px;  
left: 400px;  
line-height: 20px;  
padding: 25px 10px;  
color: #000;  
font-family: sans-serif;  
font-size: 12px;  
font-weight: bold;  
text-align: center;  
background-color: #fed;  
z-index: 5;  
}  
  
a.menu:hover .hover_text, a.menu:focus .hover_text {  
display: block;  
}  

Soweit wurde das alles von der oben genannten Seite "abgekupfert". Im FF sieht es perfekt aus, nur der IE streikt. Die Box wird dort nur sichtbar, wenn die Positionierung "left" innerhalb der Link-/Listengrenzen bleibt. Sobald sie darüber hinaus steht, wird derjenige Teil abgeschnitten. Auf der verlinkten Seite funktioniert es auch mit dem IE. Deshalb bin etwas ratlos...

Hätte jemand eine Idee, was dahinter stecken könnte? (z-index ist übrigens auf dem höchsten Wert innerhalb des Stylesheets)

Ich bin für jede Idee dankbar!

Gruß, Marco