Untermenüpunkte liegen übereinander

  • Kann sich jemand (bzw. mir) erklären, wieso die Unterpunkte zu "Unsere Leistungen" übereinander liegen?:

    https://bit.ly/2Thm8W6


    Was habe ich beim CSS-Formatieren falsch gemacht? ||


    Der Unterpunkt übernimmt die Border-Eigenschaften des Hauptmenüs. Irgendwie bin ich ratlos. Eigentlich wollte ich das Untermenü vertikal in Blöcken anzeigen lassen.


    Ich bin über jeden noch so kleinen Tipp sehr dankbar!


    Die besten Grüße und einen guten Start in den Tag. :)

  • Der Grund ist, dass Du die betr. Listenpunkte absolut positioniert hast, ohne eine Position anzugeben. Ändere folgendes:

    • Lösche position:absolute; bei den Listenpunkten der Untermenüs.
    • Gib den Listenpunkten im Hauptmenü ein position:relative; und den uls der Untermenüs ein position: absolute; und ein top: 100%;.
    • Beim Hover gib dem ul der Untermenüs ein display: flex; und flex-direction: column;
    • Entferne alles float bei den Untermenüs.

    Dann sieht es so aus:

    html-seminar.de/woltlab/attachment/1815/


    Feinheiten müssen noch etwas überarbetet werden, z. B. muss die Position noch etwas weiter herunter.

  • Zunächst solltest du deine Seite mit validem HTML erstellen - da sind einige Fehler drin, die Anzeigefehler verursachen können... siehe Link

    https://validator.w3.org/nu/?d…s%2Funsere-leistungen.php

    Was habe ich beim CSS-Formatieren falsch gemacht?

    Die Zuordnung der 'position: absolute/relative' Formatierung ist nicht korrekt. Teste bitte mal, ob folgende Ergänzungen/Änderungen zu deinem CSS dich weiter bringen:

    ... sind allerdings sehr schlecht zu lesen deine Menüunterpunkte. Solltest vielleicht eine Hintergrundfarbe hinzufügen.

  • Der Grund ist, dass Du die betr. Listenpunkte absolut positioniert hast, ohne eine Position anzugeben. Ändere folgendes:

    • Lösche position:absolute; bei den Listenpunkten der Untermenüs.
    • Gib den Listenpunkten im Hauptmenü ein position:relative; und den uls der Untermenüs ein position: absolute; und ein top: 100%;.
    • Beim Hover gib dem ul der Untermenüs ein display: flex; und flex-direction: column;
    • Entferne alles float bei den Untermenüs.

    Dann sieht es so aus:

    html-seminar.de/woltlab/attachment/1815/


    Feinheiten müssen noch etwas überarbetet werden, z. B. muss die Position noch etwas weiter herunter.

    Das hat soweit auch geklappt, jedoch verschiebt das aufklappende Menü nun die gesamte Seite nach unten.


    Wo liegt jetzt noch der Fehler?

  • Kann mir jemand verraten, wie ich anhand der Funktion "Element untersuchen" auf ausgeblendete Elemente zugreifen kann?


    Jetzt habe ich zwar das UL-Menü so, dass es beim Aufklappen den Rest nicht mehr verschiebt, jedoch liegt der erste Untermenü-Eintrag noch direkt über dem Hauptmenü-Eintrag. Ich weiß auch nicht mehr, wie das Attribut "top: 100%;" zustande kommt.


    Kann mir jemand sagen, wie ich das Unter-UL nun noch so weit nach unten verschiebe, dass es beim Aufklappen wirklich unterhalb des Hauptmenüs angezeigt wird?


    Besten Dank an alle Helfer und ein schönes Bergfest!

  • Eine Anmerkung:


    Soll die Seite auch auf kleineren Bildschirmen wie Tablets und Smartphones funktionieren? Dann verringere einfach mal die Fensterbreite und schau die Seite dann an.


    Gleiches gilt für eine Bedienung mit Touchscreens. Ruf die Seite mal mit einem Smartphone auf. Die meisten Aufklappmenüs funktionieren dann nicht mehr, so dass die Besucher die Unterseiten überhaupt nicht erreichen können.


    Momentan erstellst du eine Seite die wahrscheinlich nur bei dir mit deinen oder ähnlichen technischen Voraussetzungen einigermaßen funktionieren wird. Das solltest du bedenken.


    Die auftretenden Probleme lassen sich später nicht mehr reparieren, sondern das muss von Beginn an funktionieren.

  • Es wird wahrscheinlich noch eine mobile Variante davon geben.


    Hat jemand eine Empfehlung, wie man die Unterpunkte Leistungen (in der Großansicht der Website) nun passend und zugänglich formatieren könnte?

Jetzt mitmachen!

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