Problem bei Menu mit Hovereffekt ...

[Big Chief]

Hi, ich habe z.Z. folgende Navi aus einem Tut zusammengebastelt:

Navi aktuell

Style-Sheet:

.box3 {
font-family:arial, verdana, sans-serif;
font-weight:bold;
width:150px;
text-align:left;}


.box3 a {
color:#000000;
background:#ece8d9;
text-decoration:none;
display:block;
padding:0.4em;
margin:0;
border:1px solid black;
width:10em;}

.box3 a:hover {
color:black;
background:#e0d9bc;
text-decoration:none;
border:1px solid black;}

.box3 a .info {display:none;}

.box3 a:hover .info {
color:black;
background:#fafafa;
font-weight:normal;
border:1px solid black;
display:block;
padding:0.4em;
font-size:0.9em;}

HTML-Datei:

<div class="box3">
<a href="#">Toller Knopf<span class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span></a>
</div>

<div class="box3">
<a href="#">Feiner Knopf<span class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span></a>
</div>

So in etwa soll meine Navi aussehen .. mit dem Unterschied, dass ich nicht nur einen beschreibenden Text zu einem Link zu haben, sondern in dem Feld das per Hover-Effekt auftaucht, sollen wieder weitere Links stehen.
Leider kann ich da ja nun nicht einfach weitere Links eintragen, da sich der span-Tag innerhalb der von a-href befindet.
Also müsste ich es hinbekommen, dass der span-Tag ausserhalb des a-href-Tags steht, aber trotzdem irgendwie auf den Hoverbefehl anspricht.

Alternativ dazu hatte ich einfach versucht folgendes zu machen:

.box3 .info {display:none;}

.box3 :hover .info {
color:black;
background:#fafafa;
font-weight:normal;
border:1px solid black;
display:block;
padding:0.4em;
font-size:0.9em;}
/*sprich, ich hab den a-Tag rausgelassen*/

Somit habe ich gehofft, dass sich der hover auf .info auswirkt, sobald man den Zeiger über .box3 bewegt. Das haut aber leider nicht hin.

Wie könnte ich das denn sonst lösen?!?

[wahsaga]

Re: Problem bei Menu mit Hovereffekt ...

links zu verschachteln ist natürlich unzulässig.

du bräuchtest also als übergeordnetes element etwas anderes als ein <a>, auf das du dann :hover anwendest.
da der IE das aber bei nicht-links immer noch nicht umsetzen kann, wird dir wohl nur eine javascript-lösung bleiben, wenn es auch im IE laufen soll.

[Big Chief]

genau das habe ich befürchtet ... aber man muss sich ja nochmal versichern.

Danke jedenfalls.