Frage von derFabi95, 58

CSS Dropdown Menü erstellen mit Topmenu position:absolute?

Hallo, wie kann ich in CSS & HTML5 ein dropdown menü erstellen, wo die hauptmenüs oben eine relative position haben und die Untermenüs automatisch darunter angeordnet werden?Ich dachte das geht mit position:absolute, aber dank den unterschiedlichen Bildschirmauflösungen verschiebt sich das ja dann trotzdem... Wie erstelle ich das denn dann? Das Hauptmenü braucht aber unbedingt position:relative. Achja, es soll overlayen, also KEINE anderen Flächen verschieben.

Danke schon mal für euere Hilfe!

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Steffile, 58

Die Untermenues sind immer position absolute, aber sie liegen in den Menuepunkten, nicht der Liste, deshalb verschieben sie sich nicht. (Ab einer gewissen Bildschirmbreite wirst du sicher ein responsives Menue aktivieren, aber das ist eine andere Sache.)

Beispiel:

<ul class="nav">
<li class="has-dropdown"><a href="name.html">Erster menuepunkt</a>
<ul class=dropdown">
<li><a href="name1.html">Erster Unterpunkt</a></ li> <li><a href="name2.html">Zweiter Unterpunkt</a>< /li>
<ul>
</ul>

Siehst du, dass die Liste ul.dropdown zwischen den <li> </li> tags des ersten Menuepunkts liegt?

Kommentar von derFabi95 ,

Der Meinung war ich eigentlich auch, Seltsamerweise zeigt es bei mir das Dropdown-Menü ganz links an wenn ich es auf absolute setze...

Kommentar von Tiempo ,

Wenn du das parent-li auf position: relative; setzt, ist left: 0; bei dem absoluten Untermenü nicht mehr ganz links vom Viewport, sondern ganz links von dem übergeordneten li, wie du es haben willst.

Antwort
von userfromberlin, 33

Kennst Du den select-Tag? Das sollte all Deine Probleme lösen. http://www.w3schools.com/tags/att_option_value.asp

Kommentar von derFabi95 ,

Nicht diese Art von Dropdown-Menü. Bitte die Fragestellung richtig lesen und dann antworten.

Kommentar von userfromberlin ,

Bitte die Frage verständlich formulieren und dann Antworten kritisieren^^

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten