[ERLEDIGT] CSS Menu Vertikal responsive

[basti1012]

Ja das geht.
Du solltest die Menüpunkte mit einer eindeutigen ID oder class ansprechen können.
Zb

<li class="menu3"><a href="#">Menu-3</a>
              <ul>....

Jetzt musst du nur noch wissen auf welcher Seite du bist.
Ich kenne dein System nicht was du benutzt (WP, Template, Eigenbau, usw.).
Du musst auf jeden Fall auf der aktiven Seite die CSS ändern
z. B.

li.menu3 ul {
    left: 160px !important;
}

Ungetestet, weil bin Mobil unterwegs.

 

[fred48]

So geht es !

Bei aktivem Menü (z.B 3.2) sollten beim überfahren der anderen Hauptmenüpunkte die die Submenü's nicht angezeigt werden.

Ich habe dazu noch z-index hinzugefügt , das nützt jedoch nichts...
#menu li.menu3 ul {
left: 160px !important;
z-index: 999;
}

https://codepen.io/fred84/pen/LYNKNZL

 

[basti1012]

He, verstehe das nicht ganz.
Wenn du Zb Menü3 hoverst, wird der ganze 3er Block (3.1, 3.2, 3.3, 3.4) angezeigt.

Wenn du auf Seite 3.2 bist, wird bei dem jetzigen Code der ganze 3er Block angezeigt.
Wie willst du das den haben?
Auf Seite 3.2 soll nur der 3.2 Menü angezeigt werden, und die anderen 3.1, 3.3, 3.4 sollen erst beim hovern angezeigt werden?

Wenn du das haben möchtest, muss ich dir sagen, dass der Code dafür so ungeeignet ist.
Man müsste es etwas umbauen damit es ohne Pfusch und Javascript läuft.

Falls ich dich falsch verstanden habe ,erkläre es nochmal für Doofe wie du es meinst.

 

[fred48]

ich hab mich nicht klar ausgedrückt ;-)
so wie es jetzt ist passt es schon.
Also wenn ich auf der Seite 3.2 bin wird der ganze Block (3.1, 3.2, 3.3, 3.4) angezeigt.
Menu3 und das aktuelle 3.2 wird noch in einer anderen Farbe hervogehoben , alles tip top ;-)

Es ist nur ein "schönheitsfehler" , denn wenn ich bei aktiver 3.2 über die Menüs 1,2,4 hovere, werden diese Submenus unten angezeigt (im momment nur die 1.5,2.5,4.5) das sollte nicht sein.

 

[basti1012]

Wenn du auf 3.2 bist und der 3er Block draußen ist sieht man die anderen Blöcke nicht mehr, wenn man sie hovert, nur die 1.5 , 2.5 , 4.5 die unten rausschauen.
Das meinst du, oder ?

 

[fred48]

nur die 1.5 , 2.5 , 4.5 die unten rausschauen.
Das meinst du, oder ?

genau

 

[basti1012]

Eigentlich muss hier nur ein hoher z-index rein

@media screen and (min-width : 760px){
  #menu ul li:hover > ul {
    left:160px;
  }
}

Habe aber die CSS noch etwas geändert.

Zur Lösung

 

[fred48]

wow !
so ist es natürlich noch viel eleganter !

Vielen Dank !!!

ich hatte den z-index an der falschen Stelle gesetzt (#Menu)