CSS3 Dropdown Menü funktioniert nicht richtig

  • Hallo Leute,


    Hab seit kurzem mit HTML5 & CSS3 angefangen.

    Möchte auf meiner Homepage ein verschachteltes Dropdown Menü mit CSS3 erstellen.


    Hab bei dieser Seite eins gefunden

    https://wiki.selfhtml.org/wiki…%C3%BCs_mit_CSS_gestalten


    Nun hab ich das in meine Homepage eingefügt aber es funktioniert nicht richtig.

    Die anderen Menü punkte nach dem Dropdown Menü werden nach unten verschoben und das Dropdown menü wird auch nicht richtig angezeigt.


    Könnte mir jemmand bitte sagen was ich da falsch mache?


    Hier der HTML Code



    Hier der CSS3


  • Basti danke dir!


    Schau schon ganz gut aus.

    Nur sollte das Navi-Menü nicht so lang gezogen sein und die Untermenüs sollten direkt unterhalb von Produkte sein.


    Wäre das noch machbar? :)


    Wenn du Zeit hast, könntest du mir bitte erklären was ich falsch gemacht habe?


    Danke dir!!!

  • Ich habe mal das Menü da rausgenommen und einzelnd gebaut

    https://basti1012.bplaced.net/…rdner=html-seminar&id=769

    Da du auf der Seite nochmal ein nav hast und weitere li und ul Elemente ,kommen die sich in der Quere. Du mußt versuchen, dass du die so ansprichst das es nur das eine Element sein kann.

    Wenn du 2 mal das <nav> hast dann sprichst du es nicht mit nav an ,sondern fängst mit den Elternelement an zb

    Code
    #header>nav{}

    und das andere nav dann

    Code
    #main>selection>nav{}


    Somit kommen die verschiedene Werte die im Nav stehen sich nicht mehr in der Quere.


    Du kannst den nav auch id`'s Vergeben ,dann sind die auch ansprechbar ohne das die sich in quere kommen

    also so


    Code
    <nav id="nav1">   und <nav id="nav2">

    Jo und so weiter.

    Das solltest du erstmal auf deiner Seite so machen das sich da nix mehr stören kann.

    Sowas ist auch wichtig wenn du mal komplexe Seiten baust mit mehreren 1000 Zeilen Cole und Css. Wenn du dann mal 2 Gleiche Elemente hast die sich stören suchst du Ewigkeiten.

    Also an besten gleich so ansprechen das keine verwechslung passieren kann.

  • Soweit so gut, basti1012, aber wenn man deine Navigation auf Smartphonegröße zusammenschiebt, kann man die Untermenüs nur beim Hovern sehen und nicht anwählen. Kannst du das noch besser? Danke!

  • Bestimmt, weil er den hier vergessen hat nav li:focus-within .submenu. Nur leider funktioniert es nicht im IE und Edge.

    Alternativ kann man ja die Subs bei Smartphones permanent anzeigen -ist am einfachsten.

Jetzt mitmachen!

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