Dritte ebene im Menü wird nicht angezeigt

[stefanv]

Hallo Zusammen,

CSS mag mich mal wieder nicht...
Ich habe ein horizontales Menü mit drei Ebenen, die per hover angezeigt werden. Die zweite Ebene funktioniert auch super.
Der css code der 3. Ebende ist eine 1:1 Kopie der 2. Ebene, nur mit level_3. Funktioniert auch. Wird alles sauber formatiert. Habe die Ebene testweise dauerhaft eingeblendet und die Farben geändert. Hat funktioniert.
Es wird halt nur nicht eingeblendet. Weiß jmd. was ich da übersehe?

Danke,
Stefan

/* ======================================
   Horizontale Navigation – Zweite Ebene
   ====================================== */

/*Ebene ausblenden*/
#header .mod_navigation .level_2 {
  width: 0;
  height: 0;
  position: absolute;
  left: -32786px;
  top: -32768px;
  overflow:hidden;
  display: inline;
}

/*Ebene bei mouseover anzeigen*/
#header .mod_navigation li:hover .level_2 {
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  overflow:hidden;
  display: block;
  z-index: 1000;
}

/*Ebene design*/
#header .mod_navigation .level_2 li{
  margin-right:10px;
  border: 1px solid #89adcd;
}

#header .mod_navigation .level_2 a{
  font-weight:normal;
}

#header .mod_navigation .level_2 span.active{
  font-weight:bold;
}

#header .mod_navigation .level_2 .active,
#header .mod_navigation .level_2 .trail {
  font-weight:bold;
  color: #E2001A;
}

#header .mod_navigation .level_2 a:hover,
#header .mod_navigation .level_2 a:focus {
  font-weight:bold;
}

/* ======================================
   Horizontale Navigation – Dritte Ebene
   ====================================== */

/*Ebene ausblenden*/
#header .mod_navigation .level_3 {
  width: 0;
  height: 0;
  position: absolute;
  left: -32786px;
  top: -32768px;
  overflow:hidden;
  display: inline;
}

/*Ebene bei mouseover anzeigen*/
#header .mod_navigation li:hover .level_3 {
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  overflow:hidden;
  display: block;
  z-index: 1000;
}

/*Ebene design*/
#header .mod_navigation .level_3 li{
  margin-right:10px;
  border: 1px solid #89adcd;
}

#header .mod_navigation .level_3 a{
  font-weight:normal;
}

#header .mod_navigation .level_3 span.active{
  font-weight:bold;
}

#header .mod_navigation .level_3 .active,
#header .mod_navigation .level_3 .trail {
  font-weight:bold;
  color: #E2001A;
}

#header .mod_navigation .level_3 a:hover,
#header .mod_navigation .level_3 a:focus {
  font-weight:bold;
}

[stefanv]

Hallo Zusammen,

ich habe noch mal weitergesucht. Firebug zeigt mir an das die dritte Ebene im layout vorhanden ist. Es zeigt mir auch den dazugehörigen CSS Code an. Habe auch den Hover CSS von der zweiten und dritten Ebene verglichen. Da ist alles identisch. Das Menü wird halt nur nicht sichtbar gemacht.

Generell funktionieren soll das aber schon was ich da will oder?

[kos]

Hallo Stefan,

dir wird sicher bei CSS-Fragen schnell geholfen, wenn du der Community eine Link zur Verfügung stellst, oder das Porblem in CodePen oder jsFiddle nachbaust.
Dann können die Helfer auch mit Entwicklungstools nach der Ursache forschen.

[tab]

Wie soll es denn genau aussehen?

Z.B.:
- Level 1 horizontal, wird immer angezeigt.
- Level 2 klappt nach unten raus, und ist vertikal angeordnet. Wird angezeigt wenn die Maus über dem Menüpunkt der Ebene 1 steht.
- Level 3 klappt nach rechts raus, und ist vertikal angeordnet. Wird angezeigt wenn die Maus über dem Menüpunkt der Ebene 2 steht.

So? Oder wie sonst?
Bei den Hover-Geschichten musst du wohl auch aufpassen, nicht zuviel zu selektieren.

#header .mod_navigation li:hover .level_3

Das selektiert z.B. die Liste der Ebene 3, wenn die Maus über dem Menüpunkt der Ebene 1 oder Ebene 2 steht. Soll es nur für hover über Ebene 2 gelten, dann sollte es eher heissen

#header .mod_navigation .level_2 li:hover .level_3

Das wäre dann wieder eindeutig.

[stefanv]

Hallo Tab,

Wie soll es denn genau aussehen?

Z.B.:
- Level 1 horizontal, wird immer angezeigt.
- Level 2 klappt nach unten raus, und ist vertikal angeordnet. Wird angezeigt wenn die Maus über dem Menüpunkt der Ebene 1 steht.
- Level 3 klappt nach rechts raus, und ist vertikal angeordnet. Wird angezeigt wenn die Maus über dem Menüpunkt der Ebene 2 steht.

So? Oder wie sonst?

1. Ebene wird immer angezeigt, alle weiteren Ebenen werden unter der jeweiligen Ebende ebenfalls horizontal angezeigt.

Bei den Hover-Geschichten musst du wohl auch aufpassen, nicht zuviel zu selektieren.

#header .mod_navigation li:hover .level_3

Das selektiert z.B. die Liste der Ebene 3, wenn die Maus über dem Menüpunkt der Ebene 1 oder Ebene 2 steht. Soll es nur für hover über Ebene 2 gelten, dann sollte es eher heissen

#header .mod_navigation .level_2 li:hover .level_3

Das wäre dann wieder eindeutig.

Ich habe das gerade mal eingebaut, aber da will der auch nicht. Habe testweise mal die unterebenen auf Vertikal gestellt und da wurde die dritte ebene schon angezeigt wenn ich mit der Maus auf Ebene 1 war?!?
bevor ich jetzt lange versuche mache, Ohne die Levelangabe im CSS sondern nur mit ul li ul li ect sollte ja auch bei contao kein problem sein oder?

[tab]

Dass du die dritte Ebene anders gar nicht siehst, liegt eventuell daran, dass sie hinter der Ebene 2 angezeigt wird, also eventuell mal z-index für Level 3 erhöhen. Dass beim oben geposteten CSS die Ebene 3 schon eingeblendet wurde, als du mit der Maus über der Ebene 1 warst, ist auch klar. Wie oben geschrieben, der eine Selektor für Level 3 greift eben auch für das li der Ebene 1. Die ul.level_3 liegt ebenso innerhalb dieses li wie die ul.level_2. Mit den verschachtelten ul li ul li ... muss man natürlich auch aufpassen. Ein Selektor "ul li" passt nicht nur für das li der Ebene 1, sondern auch für Ebene 2 oder 3. Wenn das allerdings nacheinander mit "ul li ul li" bzw "ul li ul li ul li" überschrieben wird, sollte es eigentlich auch wieder stimmen. Denn auch mit "ul li ul li" selektierst du die li's der Ebenen 2, 3, ... immer alle mit. Im Buch entsteht die ganze Problematik gar nicht erst, weil es nur 2 Ebenen gibt. Deswegen sind dort die Selektoren eindeutig.

[stefanv]

Auf die Z-Achse habe ich auch schon getippt, sie ist es auch nicht...

Aber danke an kos bezüglich JSFiddle. Kann ich noch gar nicht. Habe den auszug der Seite mal online gestellt. Vieleicht hilft uns das besser auf den Grund der unsichtbarkeit zu kommen.
http://jsfiddle.net/gd4y1ezr/
Unter Start -> Seite 1 ist die dritte Ebene. Eigentlich...

gruß
Stefan

[tab]

Ich habe mal bei

#header .mod_navigation li:hover .level_2

overflow auf visible gestellt und das bei jsfiddle ganz verdrehte

#header .mod_navigation .level_3 li:hover {

durch das ersetzt

#header .mod_navigation .level_2 li:hover .level_3 {

Danach sieht es schon etwas besser aus.

[stefanv]

Super, danke für die Hilfe. Das da visible stand war ein copy paste fehler....

Nur warum muss ich die Klasse per

#header .mod_navigation .level_2 li:hover .level_3 {

ansprechen? Ich dachte es reicht wenn ich .level_3 anspreche. Und generell sollte ich jede CSS Klasse doch direkt ansprechen können. Warum beim Menü die verschachtelung? Das muss mir umbedingt jmd. erklären. Ich will aus meinen Fehlern ja auch was lernen

Aber natürlich ein neues Problem...
Aktuell wird die dritte Ebene untereinander angezeigt. Wenn ich das overflow auf auto setzte, wird die ebende nebeneinander angezeigt, jeodch dann mit Zeilenumbruch. alle höhen und breiten sind mit auto eingestellt. Mit festen pixelwerten funktioniert es natürlich, aber das ist ja nicht Sinn der Sache. Irgentwie scheint das auto in den Maßen der Ebenen nicht zu greifen. Die JSfiddle habe ich aktuallisiert. Wäre super wenn da noch mal drübergeschaut werden kann. CSS und ich sind leider keine Freune. Werden wir auch nicht mehr...

http://jsfiddle.net/gd4y1ezr/14/

gruß
Stefan

[tab]

Also ...
Natürlich kannst du die Klasse level_3 einfach mit .level_3 ansprechen. Aber im vorliegenden Fall sollen die Styles ja nur gelten, wenn die Maus über dem Menüpunkt von Level 2 steht. Nur diesem Fall soll die Liste (ul.level_3) eingeblendet werden. Wenn du also nur .level_3 schreibst, dann gilt das immer, egal wo die Maus steht.

Warum also ".level_2 li:hover .level_3"?
Das selektiert alle Elemente mit der Klasse level_3, die innerhalb eines Listenelements stehen, über dem die Maus steht und das seinerseits innerhalb eines Elements mit der Klasse level_2 steht. Man könnte auch "li:hover > .level_3" schreiben. Dadurch, dass dann das Element mit Klasse level_3 ein direktes Kindelement des li sein muss, ist durch die konkrete Struktur des HTML-Codes klar, dass das li ein Listenelement der Ebene 2 sein muss. Lässt man das ">" weg, dann könnte das li auch eins der Ebene 1 sein. Deswegen muss dann noch das .level_2 davor, womit wieder klar ist, dass nur Listenelemente der Ebene 2 dies erfüllen.

[stefanv]

Da ist natürlich was dran. Danke für die Erklärung. Bleibt nur noch das Problem des Zeilenumbruch. Aber fürs erste habe ich andere Baustellen... Seite muss also warten.