Quelltext für das vertikale Ausklapp-Menü

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Vertikale Ausklapp-Navigation</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#menu {
width: 140px;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu ul {
width: 140px;
list-style-type: none;
}

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

/*--definiert die "Ausklapp-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}

/*--definiert die "Ausklapp-Links" im Hoverzustand--*/
#menu a:hover {
color: #ff9224;
background: #003366;
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Ausklapp-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
top: 0px; left: 140px; z-index: 2;
display: none;
}

/*--lässt die Ausklapp-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}

/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li{
float: left;
width: 100%;
}

/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}

/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}

/*--definiert einen Einzellink im Normalzustand, wenn kein Ausklappen erforderlich--*/

#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Ausklappen erforderlich--*/

#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}

</style>

</head>

<body>

<h1 style="margin: 20px 0;">Das vertikale CSS-Ausklapp-Menü</h1>

<div id="menu"><!-- öffnet die Navigationsleiste-->

<ul><!-- öffnet den ersten Themenblock -->

<li><!-- öffnet die Listeneinträge von Thema 1 -->

<h3>Thema 1</h3>

<ul><!-- öffnet die Klappnavi von Thema 1 -->

<li><a href="#">Thema 1.1</a></li>

<li><a href="#">Thema 1.2</a></li>

<li><a href="#">Thema 1.3</a></li>

</ul><!-- schließt die Klappnavi von Thema 1 -->

</li><!-- schließt die Listeneinträge von Thema 1 -->

</ul><!--schließt den ersten Themenblock-->


<ul><!-- öffnet den zweiten Themenblock -->

<li><!-- öffnet die Listeneinträge von Thema 2 -->

<h3>Thema 2</h3>

<ul><!-- öffnet die Klappnavi von Thema 2 -->

<li><a href="#">Thema 2.1</a></li>

<li><a href="#">Thema 2.2</a></li>

<li><a href="#">Thema 2.3</a></li>

</ul><!-- schließt die Klappnavi von Thema 2 -->

</li><!-- schließt die Listeneinträge von Thema 2 -->

</ul><!--schließt den zweiten Themenblock-->

<ul><!-- öffnet den dritten Themenblock -->

<li><a class="direkt" href="#">Thema 3</a></li>

</ul><!--schließt den dritten Themenblock-->

</div><!-- schließt die Menüleiste #menu -->

</body>

</html>

zurück zur Anleitung
zur Startseite