Dropdown Menüs ohne JavaScript  

Viele Webseiten nutzen JavaScript zum erstellen von Dropdown Menüs, ich möchte zeigen das dies auch mit CSS funktioniert ganz ohne Einsatz von JavaScript. Leider interpretiert der Microsoft Internet Explorer <7 Pseudo-Klassen nicht, diesem Problem wende ich mich später zu, ich erkläre zu erst das erstellen der Dropdown Menüs für Mozilla, Firefox, Netscape Navigator und Opera. Das Dropdown Menü besteht zu aller erst aus einer Liste die folgend aussieht.

dropdown.html
  
<ul id="dropdown">
	<li id="dropdown">Test</li>
	<li id="dropdown">Test</li>
	<li id="dropdown">Test</li>
</ul>
  

Diese Liste muss zuerst horizontal ausgerichtet werden, dies erfolgt per nachfolgenden Stylesheet.

dropdown.css
  
ul#dropdown{
	margin: 0;
	list-style: none;
	padding: 0;
}
li#dropdown{
	margin: 0;
	float: left;
}
 

Jetzt müsste bei aufruf im Browser

TestTestTest

angezeigt werden. Sieht zwar nicht schön aus aber reicht fürs erste. Nun baut man eine eine <span> vor den inhalt in das Element-<li> etwa so:

dropdown.html
  
<li id="dropdown"><span class="dropdown">Dropdown</span>Test</li>
 

Nun muss noch das Unterelement-<span> des Element-<li> ausgebelendet werden.

dropdown.css
  
li#dropdown span.dropdown{
	display: none;
}
 

Um Fehlinterpretationen älterer Browser zu vermeiden, lieber der span eine class-Attribut zuordnen. Im Style etwa so:

dropdown.css
  
span.dropdown{
	display: none;
}
 

Jetzt zum Dropdown-Effekt kommt man in dem man die <span> im Style, über die Pseudo-Klasse li:hover aufruft und dort sagt das die <span> nun angezeigt wird.

dropdown.css
  
li#dropdown:hover span{
	display: block;
	position: absolute;
	margin-top: 20px;
}
 

Bei margin bitte die Höhe der li angeben, da es sonst zu einer Fehlanzeige im Mozilla und Opera kommt. Für den Internet Explorer muss man noch das whateverhover behavior einbinden, welches von der Webseite http://www.xs4all.nl/~peterned/csshover.html heruntergeladen werden kann. Nun muss noch der Style modifiziert werden.

dropdown.css
  
body {
	behavior:url("csshover.htc");
}
 

Beispiele:

Beispiel


Jetzt können Links in das Menü eingefügt werden und man hat ein super Dropdown Menü, auch ohne JavaScript.