Viel schöner ist es doch, wenn sich solch eine verschachtelte Liste nur zeigen würde, wenn man sie betrachten möchte. Wenn man mit der Maus über den Link fährt.
Okay, wie funktioniert das denn nun ?
Horizontales Klappmenü
Zunächst einmal erstellst du deine verschachtelte Liste, wie bereits in der letzten Lektion: [popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion10-1.png[/popup] |
Als Erstes lässt du die Listenpunkte verschwinden und stellst sämtliche Abstände auf 0.
#navi ul
- Listen - Typ: keine
Außenabstände - alle auf 0px
Innenabstände - alle auf 0 px
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
[col]Die übergeordnete Liste bekommt nun eine Breite und den Float left:
#navi li
- Breite 140px
flotat: Links
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
[col]Jetzt kommt noch die Klappfunktion:
Hierzu wird die untergeordnete Liste im Normal-Zustand versteckt und im Hover-Zustand angezeigt:
#navi li ul
- Anzeige: keine
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
[col]#navi li:hover ul
- Anzeige: block
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
[col]Fertig ist die Klappliste. Jetzt musst du sie nur noch ein bisschen bunt machen. Wie in der vorangegangenen Lektion.
Du wirst hierzu noch einige Styles anlegen müssen zum Beispiel:
#navi li, #navi li a, und #navi li li a
Als kleine Hilfestellung schaltest du die #navi li ul erst einmal wieder auf sichtbar, solange du sie noch formatierst.|
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
Viel Spaß beim Nachbasteln!
Meine Lösung: Klappmenü
, wenn ihr wollt könnt ihr es klappern lassen 
