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

[wahsaga]

hi,

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

A darf kein Div enthalten.

Soweit wurde das alles von der oben genannten Seite "abgekupfert".

Nein, die macht den Verschachtelungsfehler nicht.

Erst mal den Code korrigieren (und validieren), dann weitersehen.

gruß,
wahsaga

[Marco]

hallo, ist natürlich richtig, da kommt noch ein ">" hin - also ich hoffe du meintest diesen Fehler. Ich habe noch einen mouseover-effekt drin gehabt und diesen hier nur gelöscht, übersichtshalber. So siehts natürlich aus:

  
<li id="panela">  
 <a href="#" class="menu"  
 onMouseOver="over();" onMouseOut="out();"  
 onMouseOver="over();" onMouseOut="out();">  
 Startseite  
 <div class="hover_text">Willkommen</div>  
 </a>  
</li>  

So jetzt können wir weitersehen ;) siehst du vielleicht im css etwas, was dieses Phänomen erklären könnte?

Marco

[Marco]

Oder meinst du dass divs generell nicht eingebaut werden dürfen? aber bei der verwendung von spans funktioniert es ja auch nicht :(

[Marco]

Noch jemand eine Idee? Ich finde das wirklich kurios, zumal es sich ja um ein absolut positioniertes Element handelt und es ja eigentlich auch geht, nur halt außerhalb des Linkbereiches also des Menüs nicht :(

Danke für jede Idee!

[at]

Hallo.

Ich finde das wirklich kurios, zumal es sich ja um ein absolut positioniertes Element handelt und es ja eigentlich auch geht, nur halt außerhalb des Linkbereiches also des Menüs nicht :(

Absolute Positionierung ist in ihrer Anwendung nicht ganz einfach. Wie sie wirkt, hängt von den Eigenschaften der Elternelemente ab. Du hast also vielleicht einfach zu wenig CSS geklaut.
MfG, at

[Patrick Andrieu]

Hallo Marco!

hallo, ist natürlich richtig, da kommt noch ein ">" hin -

wahsaga meint, ein a-Element darf kein div-Element enthalten:
<a ...><div>...</div></a> ist also nicht erlaubt.

Viele Grüße aus Frankfurt/Main,
Patrick