Vertikale Navigation mit :hover

[Matthias Apsel]

Om nah hoo pez nyeetz, sf147!

Wenn die Maus über einen Menüpunkt fährt soll ein Untermenü aufgehen ähnlich diesem:

Verläßt die Maus nun den Bereich von Menüpunkt 2 oder der Untermenüpunkte 1...3 dann sollen die Untermenüpunkte verschwinden und sich ggfs. Untermenüpunkte der anderen Menüpunkte öffnen oder aber, falls z.B. die Maus nach links bewegt wird, nur noch die Menüpunkte zu sehen sein.
War das verständlich?

naja ;-)

<a onmouseover="oeffneMP ('untermenue');" onmouseout="schliesseMP ('untermenue');">Menuepunkt 2</a>

Das Problem ist nun, dass das Untermenü beim Mausziehen auf den Untermenüpunkt 2 zuklappt.

Soll ja wohl auch so sein. mausover - öffne, mausraus - schließe.

Ich würde eine Lösung ohne JavaScript favorisieren.

HTML

<ul id="nav">
  <li>Menüpunkt 1
    <ul>
      <li>1.1</li>
      ...
    </ul>
  </li>
  ...
im CSS kannst du dann mit

#nav > li die Menüpunkte der 1. Ebene ansprechen und beispielsweise mit #nav > li li alle untergeordneten.

Mit dem Selektor #nav > li ul kannst du alle Listen tieferer Ebenen ausblenden.

Und mit #nav >li:hover ul sie bei Bedarf wieder einblenden.

Diese Lösung funktioniert nicht in IE < 7, da diese die Pseudoklasse :hover nur auf Link-Elemente anwenden können.

Verwende zum Ausblenden nicht display:none damit du Screenreaderuser nicht benachteiligst. Schau dich im Selfhtml-wiki um.

Matthias