Dropdown Menü zentrieren

  • Hallo ;-)
    Ich versuche mich gerade daran ein Menü selber zu schreiben anstatt auf Plugins zurück zu greifen.
    Ich hab das Dropdown Menü soweit fertig erstellt, jetzt möchte ich aber, dass es zentriert unter dem Logo erscheint und zwar auch wenn man die Seite verkleinert (bis zu dem Bereich hin wo es sich vom Platz nicht mehr ausgeht, dass die Menüpunkte nebeneinander stehen. Hier will ich dann danach eine Lösung für die Mobile Ansicht finden.)

    Ich hab da jetzt schon verschiedenes probiert und leider bekomme ich es nie hin, dass es auch zentriert bleibt, wenn ich den Bildschirm verkleinere. Außerdem sind mittlerweile beim zweiten Punkt der Unterpunkte hat ("Marketing") diese nicht mehr auswählbar (beim ersten funktioniert es jedoch).

    Kann mir jemand helfen wie ich das umsetzen kann?

    Link zur Seite: http://www.testy.bplaced.net/wordpress/

    Vielen Dank im Voraus! :-)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Gib mal der Class .drop_menu per CSS ein display:inline-flex;

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Super, danke! Mit Inline hatte ich es schon mal probiert, aber nicht mit inline-flex :)

    Aber ich kann jetzt gar keine Unterpunkte mehr auswählen. Also auch nicht mehr den ersten bei Web-Entwicklung.. Woran kann das liegen?

  • Versuch es damit:

    Code
    ul.drop_menu ul {
      position: relative;
      z-index: 999;
    }
    .drop_menu li:hover ul {
      top: 0;
    }
    ul.drop_menu ul li {
      float: none;
    }

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Irgendwie verstehe ich das nicht ganz :-(

    Die Bezeichnungen habe ich ja so gar nicht? Hätte es jetzt mit

    drop_menu ul
    drop_menu li:hover ul
    drop_menu li:hover ul li a

    anstatt deiner Bezeichnungen probiert. Aber dann zieht sich das Menü so auseinander??

  • Och man ... es muss nicht immer alles schon vorhanden sein. Man kann auch Elemente neu definieren.

    Teste meinen Code einfach mal. Wenn dann was nicht passt, einfach wieder melden.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Meiner Meinung nach könnte man das auch einfach dabei schreiben um Verwirrungen zu vermeiden, aber gut ;-)

    Ich hab sie jetzt im style eingefügt, aber es ändert sich nichts.
    Der . zwischen ul und drop_menu bedeutet, dass es für beide gilt, richtig?

  • Der . zwischen ul und drop_menu bedeutet, dass es für beide gilt, richtig?


    Nein, der bedeutet, dass die ul mit der class drop_menu gemeint ist.

    Ich sehe den Code bei dir in der css nicht. Wo hast du ihn eingefügt?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ich hab es direkt ins Style.css reingeschrieben. (Hab auch noch mal nachgeschaut, es steht zumindest da drin ^^)
    Muss ich das irgendwo in die php Datei dann auch noch einbauen?

  • Du hast vor die ul ein Punkt gemacht, das ist falsch. Punkt bedeutet, dass eine Class folgt. UL ist aber keine Class. Versuch es noch mal mit meinem Code von oben.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

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