HTML Dropdown-Menü: Fehler

[LynQ]

Hallo Leute,

ich sitze gerade an einem Fehler und komme einfach nicht weiter. Ich weiß, es ist wahrscheinlich kinderleicht, aber ich hab gerade ein Brett vorm Kopp. Also folgendermaßen: Ich will ein Dropdownmenü machen, ein Hauptpunkt - zwei Unterpunkte.

Der Hauptpunkt soll ein Bild sein, dass sich per hover verändert, wenn man darüber geht.
Die zwei Unterpunkte sollen als Schrift sich unter dem Bild öffnen, wenn man auf dem Bild schwebt, natürlich sollen sie auch anklickbar sein. Wenn man auf den Unterpunkten ist, soll das Bild im Hauptpunkt immernoch das gehoverte Hintergrundbild sein.

Ich habe es mal mit der Methode versucht:

<ul>
  <a href="#">
  <li id="Hauptpunkt">
  	<ul>
       <li><a href="#">Unterpunkt 1</a>
       <li><a href="#">Unterpunkt 2</a>
     </ul>
    </li>
   </a>
</ul>

Dabei hat #Hauptpunkt ein Hintergrundbild. Mit dem hovern klappt das alles, aber das Problem ist, dass der Link für den Hauptpunkt beim hover weg ist. In Firebug zeigt er mit den Link vor dem ersten LI an und noch einmal dahinter, aber nicht drum herum.

Wieso geht der Link nicht mehr?

Danke.

 

[Daaron]

Kann so nicht gehen:

http://www.w3.org/TR/html4/struct/links.html

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.


Ist aber auch egal, mach doch einfach

<ul>
<li class="level_1">
<span id="haupt">Soll hier was stehen? eher nicht</span>
<ul class="sub">
<li class="level_2"><a href="#">LINK</a></li>
<li class="level_2"><a href="#">LINK2</a></li>
<li class="level_2"><a href="#">LINK3</a></li>
</ul>
</li>
<li class="level_1">
</li>
<li class="level_1">
</li>
</ul>

Im CSS kommt dann in etwa:

ul.sub
{
display: none;
}

li.level_1 span
{
display:block;
width: 10px;
height:20px;
background-color: #ff0;
}
li.level_1:hover ul
{
display:block;
}
li.level_1:hover span
{
background-color: #f0f;
}

Wenn du nicht gerade für IE6 schreibst kannst du :hover auf alles anwenden, nicht nur auf Anchor. Wenns doch IE6 is nimm JavaScript zu Hilfe. Wenn das nicht geht hat der User Pech gehabt, soll er halt updaten.

 

[LynQ]

Klappt super, danke dir! Den IE6 muss ich nicht beachten.

Ein Link im Link, sowas kann auch nur mir einfallen -.-"

 

[Daaron]

ne, nicht direkt. ich hatte auch schon solche fehlkonstrukte... Nicht direkt mit a im a, aber mit solchen Fehlleistungen wie div im span.
das beste ist aber, wenn du dann mal mit einem CMS arbeitest, dass für alle Eingaben den TinyMCE nutzt und zwanghaft um jedes Stück Text ein <p> setzt. Versuch dann mal, den eingegebenen Text als title- oder alt-Attribut zu verwenden.