Navigaitonspunkt Hintergund verändern

  • Hallo zusammen,


    ich habe 2 Fragen.


    Zum einen habe ich ein Dropdown-Erstellt.


    Es handelt sich um ein Horizontales Menü, bei jedem Unterpunkt wird bei "hover" ein Div mit weiteren punkten zum Menüpunkt angezeigt.
    Des Weitern wird bei Hover auf dem Menüpunkt, dessen Hintergrundfarbe verändert.


    Sobald ich die Maus nun von dem Menüpunkt auf das, durch hover ausgeklappte, Div ziehe, erhält der Menüpunkt natürlich wieder seinen "nicht hover" Hintergrund.


    Jetzt zu meiner Frage:


    Ist es möglich dass ich den Menüpunkt Hintergrund weiterhin verändere, während ich auf dem ausgeklapptem Div Hover?


    Also ich weiß dass man den Hintergrund von einem untergeordneten Element verändern kann z.B. durch: nav > ul > li:hover > li { background-color:blue; }


    Aber geht dass auch mit einem Übergeordnetem Element? Das wäre zur Zeit meine Idee.
    Als Alternative würde ich einen "Pfeil" an das ausgeklappte Div hängen welcher auf den Menüpunkt zeigt. (Das kriege ich auch alleine Hin)




    Dann hätte ich noch eine zweite Frage:


    Und zwar habe ich meine Navigation ausgelagert.


    Gehen wir mal von folgenden Menüpunkten aus: STARTSEITE SEITE 1 SEITE 2 SEITE 3


    Nun würde ich jedoch gerne wenn ich auf der SEITE 1 bin, den HIntergrun dieses Menüpunkt andersfarbig darstellen.


    Wenn jede Seite eine eigene Navigation hätte, wäre das natürlich kein Problem, aber ist das bei einer ausgelagerten Navigation auch irgendwie möglich?


    Vielen Dank schon mal für eure Hilfe!

  • Zur ersten Frage:

    Zitat

    Sobald ich die Maus nun von dem Menüpunkt auf das, durch hover ausgeklappte, Div ziehe, erhält der Menüpunkt natürlich wieder seinen "nicht hover" Hintergrund.

    Wenn das so ist, hast Du die Struktur ungünstig aufgebaut. Das aufgeklappte Menü muss innerhalb des oberen liegen, dann bleibt das hover bestehen und der Menüpunkt bleibt ausgeleuchtet. Hier ein Beispiel ohne großes Styling:


    https://jsfiddle.net/Sempervivum/huw7hfy9/


    Allerdings verstehe ich eines nicht: Wenn das hover nicht mehr wirksam ist, wenn Du auf das Untermenü gehst, müsste dieses doch wieder zu klappen?

  • Ich würde immer die Toplevels verlinken.

  • Ahh.. jetzt habe ich meinen Fehler gefunden!


    Ich danke euch.


    Ich hatte das Menü zwar richtig aufgebaut allerdings habe ich statt nav ul li:hover folgendes gemacht: nav ul li a:hover



    Jetzt bleibt der TOP Level Punkt ge"hovert" :D


    Jetzt habe ich nur noch das Problem mit der ausgelagerten Navigation.
    Gibt es da eine Funktion, nach dem Motto if aktuelle Seite gleich TOP 1-1, dann addclass(" backgroundblue");


    Gruß Reschke