Menüzeile mit Listen - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Men&uuml;zeile mit Listen - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description" content="&Uuml;bung Cascading Style Sheet. Men&uuml;zeile mit Listen." />
 <meta name="keywords" content="HTML, Cascading Style Sheet, CSS, Listensymbol, Liste" />
 <meta name="author" content="Dr. Roland Unger" />

 <style type="text/css">
 <!--

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

  .menu a {
     text-decoration: none;
  }

  .menu li {
     float: left;
     margin: 0;
     padding: 0.3em 0;
     /* nötig wegen float */
     position: relative;
     /* Container für nachfolgende absolute Positionierung */
  }

  .menu span , .menu a {
     padding: 0.3em;
     border: 1px solid #000;
     background: #fff;
     white-space: nowrap;
  }

  .menu > li > span , .menu > li > a {
     border-right: none;
  }

  .menu .last {
     border-right: 1px solid #000;
  }

  .menu span:hover , .menu a:hover {
     background: #e5f3ff;  /* hellblau */
  }

  .menu ul {
     margin: 0;
     padding: 0;
     left: 0px;
     top: 1.9em;
     position: absolute;
     list-style-type: none;
     display: none;
  }

  .menu li:hover ul {
    display: block;
    /* Unternavigation einblenden */
  }

  .menu ul li {
     float: none;
     display: block;
  }

  .clearer {
     display: block;
     visibility: hidden;
     margin: 0;
     height: 0;
     line-height: 0;
     background: transparent;
     color: #fff;
     clear: both;
  }

  -->
 </style>
</head>

<body>

<h2>Workshop Internet-Präsenz</h2>

<h3>Menüzeile mit Listen - Cascading Style Sheet</h3>

<p>Nicht jede Auflistung hat das Aussehen einer
klassischen nummerierten oder unnummerierten
Aufzählungsliste. Es ist auch denkbar, dass man
die Aufzählung z.B. zu Navigationszwecken in
einer Menüzeile vornehmen möchte.</p>

<ul class="menu">
 <li><span>Erster Eintrag</span>
  <ul>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 11</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 12</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 13</a></li>
  </ul>
 </li>
 <li><a href="fr_css_b06.html" target="_top">Zweiter Eintrag</a></li>
 <li><span>Dritter Eintrag</span>
  <ul>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 31</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 32</a></li>
  </ul>
 </li>
 <li><span class="last">Vierter Eintrag</span>
  <ul>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 41</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 42</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 43</a></li>
   <li><a href="fr_css_b06.html" target="_top">Untereintrag 44</a></li>
  </ul>
 </li>
</ul>

<div class="clearer">&nbsp;</div>

<p>Das Beispiel funktioniert
nicht im Internet Explorer, da er die Pseudoklasse
:hover nur bei Links unterstützt. Man könnte diese
Funktion mit zwar mit einem JavaScript-Skript
bereitstellen, dann verliert das Beispiel seinen
Sinn, nämlich das menü nur mit Cascading Style
Sheets zu realisieren.</p>

</body>
</html>