Navigationsleiste mit Dropdown

  • Hallo,


    ich lerne gerade HTML und CSS und versuche, die aller erste Website zu bauen. Bei dem Thema "Navigationsleiste" stoße ich gerade massiv auf Probleme und hoffe, dass mir hier geholfen werden kann.


    Ich möchte gerne eine Navigationsleiste haben, wo man bei einigen Elementen "hovern" kann und sich dann ein dropdown-Menü mit weiteren Seiten aufbaut. Folgenden Code habe ich genutzt:


    https://jsfiddle.net/u3ct61y9/


    Aktuell habe ich die obere Struktur soweit fertig, die auch annehmbar aussieht. Allerdings passiert beim hover nichts. Blendet man das "display: none;" aus, so sieht man, dass sich das div mit der zweiten Liste nicht unter, sondern neben dem Eintrag auf oberster Ebene befindet. Wie kann ich dies beheben? Ich habe bereits vieles mit der Positionierung versucht und verzweifle langsam...


    Um das zweite Element mit dropdown-Eigenschaft habe ich bisher keine divs gebaut, da ich zunächst die erste ans Laufen bringen wollte.


    Viele Grüße

    Philipp

  • Hallo Philipp und willkommen im Forum!


    Da weiß man gar nicht wo man anfangen soll. Hast Du das selber aufgebaut?

    Zunächst zu deiner eigentlichen Frage:

    Zitat

    Allerdings passiert beim hover nichts. Blendet man das "display: none;" aus, so sieht man, dass sich das div mit der zweiten Liste nicht unter, sondern neben dem Eintrag auf oberster Ebene befindet. Wie kann ich dies beheben?

    Zitat

    Um das zweite Element mit dropdown-Eigenschaft habe ich bisher keine divs gebaut, da ich zunächst die erste ans Laufen bringen wollte.

    Zusätzliche Divs sind häufig keine Lösung sondern die Ursache für neue Probleme. In deinem Fall machen sie das HTML invalide bzw. fehlerhaft und sie sind unnötig. Dieses HTML ist valide und völlig ausreichend um die gewünschte Funktion zu erreichen.

    Eine zweite häufige Quelle für Probleme ist das Layouting mit float. Mache dich statt dessen mit Flexlayout vertraut, damit vermeidest Du unerwünschte Effekte und kannst die Elemente genau so anordnen wie Du es dir vorstellst:

    https://www.html-seminar.de/css-flexbox.htm

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    Ich habe mal das CSS so weit angepasst, dass das Aufklappen funktioniert:

    https://jsfiddle.net/Sempervivum/bL9681me/1/

    Die Änderungen habe ich jeweils mit einem Pfeil --> markiert.


    Da gibt es noch einiges zu tun aber ich bin immer dafür, Schritt für Schritt vorzugehen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!