Jak vytvořit HTML rozevírací menu s podnabídkou

Rozevírací nabídky – často nazývané i “suckerfish” – se skládají z HTML (seznamů <ul> a <li>) a stylů v CSS. Hlavní lišta menu a odkazy stylujete v CSS a vnořené seznamy se pak stanou podnabídkami. Díky CSS‑selektoru :hover můžete skrytou podnabídku zobrazit změnou vlastnosti display na block.

Krok 1 – HTML struktura

Vytvořte základní seznam s položkami menu:

<ul id="menu">
    <li>Odkaz 1</li>
    <li>Odkaz 2</li>
    <li>Odkaz 3</li>
</ul>

Před koncem seznamu vložte prvek <div class="clearfix"></div>, který později použijeme k roztažení pozadí.

Krok 2 – Přidání podnabídky

Vnořte další <ul> uvnitř položky, ke které má podnabídka patřit:

<ul id="menu">
    <li>Odkaz 1</li>
    <li>Odkaz 2
        <ul>
            <li>Pododkaz 1</li>
            <li>Pododkaz 2</li>
            <li>Pododkaz 3</li>
        </ul>
    </li>
    <li>Odkaz 3</li>
</ul>

Krok 3 – Základní stylování

V CSS odeberte odrážky a levý odsazení:

#menu {
    list-style: none;
    padding: 0;
}

Krok 4 – Barva pozadí lišty

#menu {
    background-color: #001f5f; /* tmavě modrá */
}

Krok 5 – Horizontální uspořádání položek

#menu li {
    float: left;
}

Krok 6 – Stylování odkazů

Aby odkazy měly dostatek prostoru a šly kliknout, nastavte jim blokové zobrazení a odsazení:

#menu li a {
    display: block;
    padding: 8px 15px;   /* vertikální 8 px, horizontální 15 px */
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

Krok 7 – Pozicování podnabídky

#menu ul {
    position: absolute;
    list-style: none;
    padding: 0;
}

Krok 8 – Zrušení plovoucího zarovnání v podnabídce

#menu ul li {
    clear: left;
}

Krok 9 – Skrytí a zobrazení podnabídky

#menu ul {
    display: none;               /* podnabídka je skrytá */
}
#menu li:hover ul {
    display: block;              /* při najetí se zobrazí */
}

Nezapomeňte přidat „clear‑fix“ pravidlo pro prvek .clearfix:

.clearfix {
    clear: both;
}

Tipy

• Při najetí zvýrazněte položku změnou barvy pozadí, např. #menu a:hover { background-color:#3366cc; }.
• Po dokončení statického menu můžete přidat jQuery plugin pro plynulé animace rozbalování.