Thorsten S.: Tutorial für Suckerfish Menü / Dynamische Navigation

Beitrag lesen

Sooo ... ich bin dank der Hinweise von Kai und Matthias und dem Tutorial (http://www.alistapart.com/articles/dropdowns/) eine ganze Ecke weiter. Ziel ist jetzt erstmal, das ganze im Firefox zum Laufen zu kriegen. Mögliche Probleme mit dem IE kommen später dran.

Es gibt im Firefox aber noch zwei ganz konkrete Probleme:

  • Ich möchte eine vertikale Liste unter dem Listenelement "band" platzieren. Wenn ich die Maus über "band" bewege, erscheint die vertikale Liste aber unter dem Listenelement "hoerproben" - und ich kriege nicht raus, warum das so ist und wie ich es ändern kann.

  • Ich musste in beiden Listen separat "list-style-type: none" setzen. Müsste sich das nicht vom ersten <ul>-Tag auf seine <li>-Tags und von dort auf das zweite <ul>-Tag vererben?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Dynamische Navigation</title>

<style type="text/css">

ul#navigation {
            list-style-type: none;
}

li {
            padding: 0px 10px 0px 10px;
            float: left;
            position: relative;
}

li ul {
            display: none;
            position: absolute;
            list-style-type: none;
}

li ul li {
            width: 4em;
}

li > ul {
            top: auto;
            left: auto;
}

li:hover ul {
            display: block;
}

</style>
</head>

<body>

<ul id="navigation">
     <li><a href="aktuell.php">aktuell</a></li>

<li>band
         <ul>
         <li><a href="katrin.php">Katrin</a></li>
         <li><a href="kery.php">Kery</a></li>
         <li><a href="kirsten.php">Kirsten</a></li>
         <li><a href="michael.php">Michael</a></li>
         <li><a href="oliver.php">Oliver</a></li>
         <li><a href="thomas.php">Thomas</a></li>
         <li><a href="thorsten.php">Thorsten</a></li>
         </ul>
     </li>

<li><a href="hoerproben.php">hörproben</a></li>
     <li><a href="bilder.php">bilder</a></li>
     <li><a href="kontakt.php">kontakt</a></li>
     <li><a href="links.php">links</a></li>
</ul>

</body>
</html>