Dropdown Menü - Grundlegende Fragen

[LeMarkus]

Hi,
ich frage mich, was die beste Möglichkeit ist Submenüs von normalen Navigationen (<ul><li>) zu positionieren. Klar habe ich mich schon informiert und verschiedenen angeschaut, aber ich verstehe dabei das grundlegende Prinzip nicht. Ich möchte hier keinerfalls vorgefertige, sondern lediglich das Grundprinzip hinter der Positionierung, Ein-und Ausblendung.
Auch möchte ich den Internet Explorer in den älteren Versionen nicht weiter beachten und dies nur auf modernen Browsern zum laufen bekommen. Wie man eine einfache Navigation aufbaut auch, meine Kenntnisse in HTML/CSS sind auch einigermaßen gut, lediglich das bereitet mir schierigkeiten (genauso wie border-image, aber das ist ein anderes Thema ).

Gehen wir davon aus der Aufbau ist wie folgt:

<ul id="nav">
    	<li><a href="">LALE</a>
        	<ul>
            	<li><a href="">GALLERY</a></li>
                <li><a href="">FORUMS</a></li>
            </ul>
        </li>
        <li><a href="">LULU</a></li>
        <li><a href="">COMMUNITY</a></li>
        <li><a href="">LÖLÖ</a></li>
    </ul>

Der CSS Code ist genauso standart. Die Menüpunkte sollen erstmal vertikal angeordnet sein (also ohne "float:left;", "display:inline;" und sonstige Geschichten) und die Subnavigation soll rechts neben dem aktiven Hauotmenüpunkt beim "hover" erscheinen.
Das wäre die erste Frage. Wie gehe ich schritt für Schritt vor, welche CSS Eigenschaften brauche ich.

Die anderee Frage wäre entsprechend eine horizontale Navigation mit vertikalem Submenü unterhalb des aktiven Punktes.

Wie schonmal gesagt, Codeschnippsel und das benötigte Werkzeug reichen mir. Ich muss und will es nur verstehen ohne Copy+Paste.

 

[SpiceLab]

• Listen-Navigationen
• Mehrere Navigationsebenen

 

[LeMarkus]

Vielen Dank erstmal für die Antwort. Der erste Link stellt nur einfach Navigationen vor, welche kein Problem darstellen (wie oben bereits erwähnt). Der 2. Link mit einer Unternavigation dagegen macht zwar eine Dropdown Liste, diese ist allerdings unterhalb des aktiven Punktes (wenn auch eingerückt). Auch das ist mit Hilfe von ein wenig CSS nicht weiter das Problem. Vielmehr geht es mir darum die Unternavigation neben (nicht unter) des aktiven Hauptnavigationspunktes zu positionieren. Ziel des Ganzen ist es erstmal wie eine Art "Sprechblase" als Unternavigation zu benutzen. Diese soll neben dem Hauptnavigationspunkt auftauchen. Mit position:absolute; für die untere Navigation (ul li ul) komme ich einigermaßen auf mein Ergebnis, allerdings lässt sich dieses ul Element nicht wirklich vernünftig anordnen...

EDIT: Ich habe weiter versucht. Da man absolut positionierte Elemente innerhalb eines relativen Elements frei bewegen kann, habe ich mir diese Eigenschaft zu Nutze gemacht und das Haupt-li Element relativ positioniert und das darin liegende Submenü-ul Element absolut positioniert. Nun konnte ich dieses ul Element mit Hilfe von (top: 0; und left: 180px neben das li Element bewegen. Zwar stimmt es noch nicht ganz, aber mal weitermachen.
Ist dieser Lösungsansatz denn richtig oder gibt es einen besseren?

 

[SpiceLab]

Was die Positionierung der Untermenüebenen betrifft, bist du auf dem richtigen Weg.

Son of Suckerfish Dropdowns --> Suckerfish Dropdowns - Vertical