CSS horizontales Menu: .active bei submenu nicht anzeigen

[thorsten23]

Hallo allerseits,

ich habe ein Problem mit dem Stylen des Menus (Standardmenü von Contao). Wenn ich einen Untermenueintrag auswähle (horizontales Menü), dann wird der Eintrag angezeigt und mit der Klasse .active gestyled. Auf der ersten Menüebene ist das ja ok, aber ausgewählte Einträge im Untermenü müssen natürlich wieder verschinden, wenn der Eintrag zwar ausgewählt ist, aber die Maus nicht mehr "hovert". Bei mir bleibt aber der ausgewählte Untermenüpunkt sichtbar zusätzlich zur eigentlichen Menüzeile. Der Eintrag verschindet erst dann, wenn ein anderer Eintrag ausgewählt wurde.

Mit

ul.level_2 .active {
display:none;
}

kann ich zwar dafür sorgen, das der aktive Eintrag aus dem Untermenü nicht angezeigt wird, aber das funktioniert genau solange (der aktive Menüpunkt aus dem Untermenü ist nicht mehr sichtbar), bis ich wieder auf das Menü hovere, und der Eintrag leider auch dort nicht mehr zum Vorschein kommt.... ich möchte den Eintrag natürlich wieder sehen, wenn die Maus über dem Menü ist....

ein

ul.level_2.active:hover {
display:block;
}

funktioniert nicht.

Was mache ich falsch ? vielen Dank für eure Hilfe!

Anbei das css.

Gruß,
Thorsten

------------------------------ css ------------------------------

.mod_navigation {
position: absolute;
z-index: 100;
margin-top: 319px;
font-size: 14px;
font-weight: normal;
}

.mod_navigation li {
float: left;
width: 108px;
line-height: 35px;
}

.mod_navigation li a {
padding: 0;
border-left: 2px solid gray;
}

.mod_navigation ul {
list-style-type: none;
}

.mod_navigation ul a {
text-decoration: none;
background-color: #c67b87;
display: block;
color: #000000;
padding-left: 15px;
}

.mod_navigation ul a:hover {
background-color: #76aeb4;
}

ul.level_2 .active {
display: none;
}

li.active span.active {
padding-left: 15px;
}

.mod_navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.submenu ul a {
/*margin-top: -20px;*/

color: #404040;
background-color: #cd8d97;
display: none;
border: 1px dotted gray;
}

.submenu:hover ul a {
color: #000000;
transition: 0.5s;
display: block;
}

[willshedo]

Hi,

ausgewählte Einträge im Untermenü müssen natürlich wieder verschinden, wenn der Eintrag zwar ausgewählt ist, aber die Maus nicht mehr "hovert".

Wenn ich deine Beschreibung richtig verstehe, ist das Verhalten deines Menüs absolut korrekt. Der einmal "ausgewählte" angeklickte, also aktive Link bleibt solang mit der Klasse active gekennzeichnet, bis du eine andere Seite angeklickt hast, egal ob in der ersten oder zweiten Ebene des Menüs.
Das hat mit dem :hover, das du unabhängig davon stylst, absolut nichts zu tun.

[Bas]

Bei Deinem geposteten CSS fehlt die active-Definierung für level1 ... oder?

Ich tippe, dass sich die active-Klasse der ersten Ebene auf Deine Sub-Ebenen vererbt und daher Deine Probleme kommen.

Du hast wahrscheinlich ein CSS für die erste Ebene das ungefähr so aussieht:

ul.level_1 li.active { [...] }

Das CSS in dem Beispiel beeinflusst die Subebenen, da diese Adressierung auch die tiefer liegenden li.active anspricht.

Versuch die Definition der ersten Ebene mittels Child-Selector zu formulieren:

ul.level_1 > li.active { [...] }

Weitere Infos: http://css-tricks.com/child-and-sibling-selectors/

[thorsten23]

nein, das ist das vollständige css.
An sich brauche ich generell erstmal keine active Klasse, da ich den gewählten Menüeintrag nicht hervorheben will.
Ich bin nicht sicher ob ich das Konzept hier richtig verstehe, aber scheinbar ist es so, daß durch das Contao Framework die ausgewählte Seite automatisch im Menü die Klasse active bekommt. Diese Klassendefinition wirkt sich dann solange auf das gewählte Element aus, bis eben ein anderes Element (aufgrund von Benutzerauswahl im Menü) die active Klasse zugewiesen bekommt. Das würde heißen, wenn ich mittels CSS dafür sorge, dass das active Element in den Sub-Ebenen nicht angezeigt wird, dann funktioniert das zwar erstmal richtig (nach erfolgter Selektion ist nur eine Leiste mit den "Top-Level" Elementen des Menüs zu sehen ist und nicht mehr der ausgewählte Untermenüpunkt), aber (wie im Ursprungspost versucht zu beschreiben) der Menüeintrag weiterhin ausgeblendet bleibt wenn das Submenu durch Hover wieder angezeigt wird. Und auf einem Element, das ich mit display:none verschwinden lasse, kann ich vermutlich keinen "Hover-Event" abfangen um es wieder sichtbar zu machen. Das würde bedeuten, ich kann das aktive Element nur stylen, aber nicht verschwinden lassen, wenn es im Submenu liegt.
Ich hatte schon überlegt mal tiefer ins Contao reinzuschauen und versuchen die Stelle zu lokalisieren an der das HTML vom Menu zusammengebaut wird, und da ggf. dafür zu sorgen das die active Klasse erst gar nicht gesetzt wird. Aber keine genaue Ahnung, ob das der richtige Weg oder überhaupt ein guter Plan ist.

Ich werd mir jedenfalls den Link erstmal durchlesen. Glaub, da gibt's noch einiges zu lernen ;-)


Danke+Gruß,
Thorsten

[Bas]

So ganz stimmt da etwas nicht. Wenn Du für die active-Klasse keine Styles hast .. wie könnte sich diese sich dann anders verhalten als Elemente ohne active-Klasse. Die Klasse hat ohne CSS keinerlei Auswirkungen. Hast mal nen Link?

[thorsten23]

Das is ne berechtigte Frage. Also, woher die Styles für active kommen sollen. Leider habe ich das momentan nur zuhause lokal am laufen. Wenn ich Zeit habe werde ich das aber mal online stellen.
Contao selbst setzt also wirklich nichts an Styles (zumindest nicht an dieser Stelle), oder ? D.h., solange ich der Klasse .active nichts zuweise, sollte nach einer Auswahl im Menü es sich einfach wieder "zusammenklappen" und aussehen wie "vorher", sozusagen ? Ich verwende ausschliesslich ein externes Stylesheet, aber ich denke nicht das das irgendne Rolle spielt. Ich muss in Firebug nochmal schauen, welche Styles für .active gesetzt sind. Am besten keine ... Danke übrigens für den Link mit den Selectors. Ich hatte das zwar schonmal gesehen (also das mit ">") aber immer in die Rubrik "guckstedirspätermalan" eingeordnet ;-)