✔ Bei a:hover sollen Subitems angezeigt werden

[Cappaja]

Hallo,

ich bastel an einem reinen CSS-Menü. Die Items spreche über ul li a an, die Subitems über ul li ul li a. funktioniert soweit alles wunderbar, ich habe nur das Problem das ich für a:hover, a:focus und a:active die Subitems anzeigen lassen möchte. Gibt es da eine weitere Pseudoklasse oder wie kann ich das bewerkstelligen? Ich habe bereits versucht die Subitems per display:none zu entfernen und bei a:hover mit display:block zu aktivieren, hat aber nicht funktioniert.
Es sollen zu Beginn also nur die Items angezeigt werden und bei hover beispielsweise die Subitems ausklappen. Das ganze ist im übrigen eine Menüliste.

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

ul li a {
	border-left: 8px solid #cccccc;
	display: block;
	color: #8592BB;
	padding: 1px 0 1px 8px;
	width: 114px;
	\width: 130px;
	w\idth: 114px;
}

ul li ul li a {
	border-left: 8px solid #CCCCCC;
	display: block;
	color: #9C9C9C;
	padding: 1px 0 1px 8px;
	margin-left: 8px;
	width: 106px;
	\width: 122px;
	w\idth: 106px;
}

a:hover,
a:focus,
a:active {
	border-left: 8px solid red;
	background: #F3F5FC;
	color: red;
	text-decoration: none;
	display: block;
}

grüße Cappaja

 

[Maik]

Hi,

lies dir mal den Artikel Son of Suckerfish Dropdowns oder auch das SELFHTML-Kapitel Dynamische CSS-Navigation für moderne Browser durch, wie sich ein Dropdown-Menü mit CSS konstruieren lässt.

mfg Maik

 

[Cappaja]

vielen Dank, damit kann ich natürlich was anfangen!
ich dachte ich hätte es auf eine andere Art und Weise gleich gelöst, aber das es über den verschachtelten Operator > geht wundert mich jetzt ein wenig.

 

[Maik]

aber das es über den verschachtelten Operator > geht wundert mich jetzt ein wenig.

Kind-Selektoren

Das <ul>-Element der zweiten Menüebene stellt das Kindelement des <li>-Elements der ersten Menüebene dar.

mfg Maik

 

[Cappaja]

Etwas macht mich dennoch stutzig: Anstelle des Hover-Effekts möchte ich bei einem Klick auf das Item, die Subitems ausklappen, diese sollen aber auch ausgeklappt bleiben, solange bis ich einen anderen Item anklicke usw...
Momentan, klappt es nicht. Der Fokus müsste doch auf dem angeklickten Item bleiben, wieso öffnet sich das Menü nur solange die Linke Maustaste auf dem Item gedrückt ist, sobald ich sie aber los lasse fährt es wieder hinein?

ul#nav2 li > ul { display: none; }
ul#nav2 li:focus > ul, ul#nav2 li:active > ul  { display: block; }

mfg Cappaja

 

[Maik]

Hi,

Etwas macht mich dennoch stutzig: Anstelle des Hover-Effekts möchte ich bei einem Klick auf das Item, die Subitems ausklappen, diese sollen aber auch ausgeklappt bleiben, solange bis ich einen anderen Item anklicke usw...

für dein Vorhaben bist du mit Javascript besser aufgestellt, da die :active-Pseudoklasse beim Loslassen der Maustaste ihre Gültigkeit verliert.

Simple click menu kommt dir da deinen (technischen) Vorstellungen entgegen.

mfg Maik

 

[Cappaja]

mit Java-Script bringt mir das ganze leider nix. Dennoch vielen Dank für die durchaus anregenden Seiten.

 

[Maik]

Inwiefern bringt dir hier JS nichts?

Auf jeden Fall mehr, als reines CSS ;-)

mfg Maik

 

[Cappaja]

Die Oberfläche hat die Anforderung barrierefrei zu sein.

 

[Maik]

Dann war's das mit dem Ein- und Ausblenden der Submenüs beim Klick auf die einzelnen Menüpunkte.

mfg Maik