Hallo,
ich versuche schon die ganze Nacht ein Dropdownmenü zu erstellen.
Was mich daran noch stört ist, dass die Unterpunkte nicht untereinander angezeigt werden und sich die Menüpunkte beim hovern nach rechts verschieben.
Außerdem soll Menü 1-2 links und Menü 3 rechts stehen.
Würdet ihr mir bitte erklären, wie ich das hinbekomme?
http://user123.bplaced.net/flexbox/
Vielen Dank für eure Hilfe
Das liegt an der fehlerhaften Zuordnung von Flex-Container(n) und Flex-Element(en).
Versuche es mal hiermit:
nav{
background-color: #F0F0F0;
font-size: 1.8rem;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav a{
text-decoration: none;
color: #666;
}
nav ul {
display: flex;
}
nav ul li {
padding: 10px;
flex: 1;
}
nav ul li ul {
position: absolute;
display: flex;
flex-direction: column;
}
nav ul li ul li {
flex: 1;
display: none;
}
nav ul li:hover ul li {
display: block;
}
nav > ul > li:hover {
background-color: #999;
}Hallo,
danke für deine Hilfe. Ein paar Fragen hätte ich aber noch.
http://user123.bplaced.net/flexbox/
1)
Mir ist schon klar, dass ein absolut positioniertes Element relativ zu seinem am nächsten positionierten Elternelement positioniert wird
und ein relativ positioniertes Element relativ zu seiner eigenen/normalen Position positioniert wird.
a) Das position:absolute positioniert also die Untermenüs. Aber wozu benötigt man das an dieser Stelle?
b) Und hätte man hier auch position:relative nehmen können?
2)
a) Wozu braucht man das display:block? Immerhin sagen wir doch weiter oben display: flex; und flex-direction: column;
b) Warum reichen diese Angaben nicht aus und brauchen da zusätzlich das display:block?
c) Warum wäre es falsch, wenn wir anstatt display:block einfach display:flex und flex-direction:column angeben?
d) Das Obermenü hat als Eigenschaft display:flex. Erbt das Untermenü vom Obermenü die Eigenschaft display:flex?
3)
Die Hauptmenüs müssen nicht alle gleich groß sein sondern sollten soviel Platz einnehmen, wie sie benötigen und nicht mehr. Außerdem sollte "Menü 3" auf der rechten Seite stehen die beiden anderen aber links bleiben.
4)
Wenn ich das richtig verstanden habe, dann bewirkt das flex:1, dass alle Zeilen gleich breit sind?
Wenn ich das flex:1 in der CSS-Datei beim Untermenü weglasse, dann ändert sich am Aussehen nichts.
Kann ich also diese Zeile Code weglassen?
5)
Die Position vom ganzen Untermenü stimmt leider noch nicht.
Was muss ich ändern, damit das Hauptmenü mit dem Untermenü bündig ist?
Vielen Dank für eure Hilfe
Uiii... das sind aber viele Fragen.
Aber eine Anmerkung zu Beginn - ich würde für das Menü auf Flex-Box verzichten, schafft für solch einfache Dinge meiner Meinung nach mehr Probleme als es löst.
Einfach die 'ul's und 'li's so nehmen, wie sie eben sind und nur für die Top-Menüpunkte 'display: inline-block;' festlegen, damit sie nebeneinander und nicht untereinander angezeigt werden. Die meisten deiner Fragen hätten sich dann auch schon erübrigt.
Warum man das Dropdown absolute positionieren sollte/muss, siehst du, wenn du mal Inhalt unter deinem Menü einfügst! Das 'absolute' sorgt dafür, dass dieses Element aus den Texfluss herausgenommen wird und somit nachfolgende Inhalte nicht verschiebt - das Element legt sich einfach über das, was da sonst noch steht. Aber wenn es so sein soll, dass deine Seite bei jedem Öffnen eines Untermenüs einen Sprung nach unten mache soll, dann kannst du das mit 'position: relative;' erreichen. Oder die Position-Anweisung ganz weglassen, dann bleibt das Pop-Up im Textfluss und alles dahinter wird verschoben.
Warum display: block; beim 'hover'? Das Element ist mit 'display: none;' unsichtbar gemacht worden... also muss es wieder sichtbar werden! Ob du das auch mit einer anderen Formatierung als 'display: block' erreichen kannst, musst du mal ausprobieren.
Dass es nicht bündig aussieht, liegt an dem 'padding' bei nav ul li, damit schaffst du links von dem Pop-Up eben einen 10px breiten Leerraum, der das Untermenü seitlich verschiebt!