CSS-Tutorial: Aufklappmenü (Drop-Down Menü)

Tutorial zum Aufbau eines Aufklappmenüs (Drop-Down Menü) nur aus HTML-Listen und CSS-Anweisungen, allerdings muss für den Internet Explorer 6 etwas nachgeholfen werden.

Die Hauptpunkte des Aufklappmenüs sind horizontal angeordnet, die Unterpunkte klappen unterhalb der Hauptpunkte aus. Die Code-Ausschnitte dieses Beispiels lassen sich problemlos an Wünsche oder gegebene Anforderungen eigener Projekte anpassen.

<div id="menu">
    <ul>
        <li class="topmenu">
            <a href="">Menü 1</a>
            <ul>
                <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
                <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
            </ul>
        </li>
        <li class="topmenu">
            <a href="">Menü 2</a>
            <ul>
                <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
                <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
            </ul>
        </li>
        <li class="topmenu">
            <a href="">Menü 3</a>
            <ul>
                <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
                <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
            </ul>
        </li>
    </ul>
</div>

Der Grundaufbau des CSS-Aufklappmenü (Drop-Down Menüs) besteht aus verschachtelten HTML-Listen, die die Verweise (<a>) zu den Menüpunkten enthalten.

Die verschachtelten HTML-Listen werden von einem <div>-Block umschlossen, der zur Positionierung dient.

<style type="text/css">
    #menu {
        font-size:14px;
        position:absolute;
    }

    #menu ul {
        list-style-type:none;
        list-style-image:none;
        margin:0;
        padding:0;
    }

    #menu li.topmenu {
        float:left;
    }

    .topmenu a {
        float:left;
        width:120px;
        text-align:center;
    }

    .topmenu ul{
        display:none;
    }

    .topmenu a, .submenu a{
        padding:15px;
        color:white;
        font-weight:bold;
        text-decoration:none;
        background-color:#985905;
        margin:0;
    }

    .submenu a{
        font-size:12px;
        width:120px;
        position:relative;
        clear:both; /* special IE6 */
    }

    #menu a:hover, .topmenu.on a {
        color:white;
        background-color:#BF7818 !important;
    }

    .topmenu:hover ul {
        display:block;
        z-index:500;
    }
</style>

Für den Internet Explorer 6 wird ein Skript benötigt, damit dieser auch den Mouseover-Effekt durch die CSS Pseudo-Klasse :hover bei allen HTML-Elementen interpretieren kann. Dazu kann Whatever:hover oder ein ähnliches Skript eingesetzt werden und die CSS-Styles müssen um folgendes ergänzt werden:

* html body {behavior: url(/path/csshover3.htc);}