Div in einen Li element einbauen

[agalva]

Hallo,
ich arbeite gerade an einen Projekt und ich habe einen Problem und weiss nicht wie ich weiter machen soll, deshalb die Frage:

Ich habe einen div mit eine Liste und 6 Elemente in der Liste. alle Elemente sind horizontal eingeordnet.
ich würde gern wenn man auf einen Element der Liste klickt einen versteckten div "toggle" darunter von diesen Div. und so hat jeden Li Element seinen eigenen Div.

Ich habe das auch geschafft indem ich einfach alle divs nach dem ersten div eingebaut habe, aber für die mobile Ansicht kommt diese Lösung nicht im Frage...

ich würde jetzt wissen ob es einen Weg gibt die divs unten den jeweiligen li's einzubauen so dass die darunter liegende Divs an der Gleiche Stelle erscheinen und nicht verschoben.... ich habe zwei Bilder Hochgeladen die zeigen genau wo die Problematik liegt.

Sorry wegen mein Deutsch, bin immer noch am Lernen.

Gruss Alva

 

[Sempervivum]

Zeig uns doch mal deinen Code. Vorläufig würde ich sagen, dass Du die unteren Elemente mit in die Listenelemente aufnehmen solltest, statt sie unabhängig zu positionieren.

 

[SpiceLab]

Dein Vorhaben ist in der technischen Umsetzung betrachtet nichts anderes als ein Dropline-Menü.

So hat @Sempervivum mit seiner Aussage Recht, eine verschachtelte Listenstruktur zu verwenden, die die oberste und untere Ebene bildet.

Die linksbündige Ausrichtung der einzelnen Unterebenen ist dann reine CSS-Arbeit:

1. position:relative für das oberste Elternelement, das die Liste beheimatet (z.B. <nav></nav>), damit sich
   
2. position:absolute; top:...; left:0; für die <ul>-Elemente der zweiten Ebene auf seine Ränder bezieht.

Für's Studium 4 Beispiele von Stu Nicholls

1. "Pure" CSS-Droplines:
   1. http://www.cssplay.co.uk/menus/pro_line_down_fly.html - Submenü von Contacts u. Shop ist gesondert rechtsbündig ausgerichtet
   2. http://www.stunicholls.com/menu/pro_dropline_2.html - Submenü von Contacts u. Shop ist gesondert rechtsbündig ausgerichtet
2. jQuery-Droplines:
   1. http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-3.html
   2. http://www.stunicholls.com/menu/jquery-dropline-7.html

Hinweis:
Die Beispiele stammen aus 2008, und die ersten beiden CSS-Demos berücksichtigen (noch) IE6 mit diversen Conditional Comments (https://de.wikipedia.org/wiki/Conditional_Comments) im HTML-Code, weil er neben a:hover die Pseudoklasse :hover bei keinem anderen HTML-Element kennt - hier das li:hover, um die untere Ebene anzuzeigen.

Sofern Du ihn nicht (mehr) auf dem Schirm der "Browserkompatibilität" hast, darfst Du sie getrost ignorieren

[edit]Tipp-Ex[/edit]​