Menu déroulant en HTML et CSS

Voici une solution pour faire un menu déroulant simplement en utilisant uniquement HTML et CSS.

Exemple de menu déroulant
Exemple de menu déroulant

Vous avez le CSS et le HTML, à vous de l’adapter à vos besoins en modifiant ce qu’il vous faut.

#menu{
    height: 21px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#menu li{
    float: left;
    text-align:center;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu li a:link, #menu li a:visited{
    display: block;
    height: 1%;
    color: #FFF;
    background: green;
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
#menu li a:hover {background-color: #F2462E;}
#menu li a:active {background-color: #5F879D;}
#menu .sousMenu{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu .sousMenu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
#menu .sousMenu li a:hover{
    background-image: none;
    background-color: #F2462E;
}
#menu li:hover > .sousMenu {display: block;}
<ul id="menu">
	<li><a href="#">Fruits</a>
            <ul class="sousMenu">
                    <li><a href="#">Pomme</a></li>
                    <li><a href="#">Orange</a></li>
                    <li><a href="#">Banane</a></li>
                    <li><a href="#">Figue</a></li>
            </ul>
        </li>
	<li><a href="#">Sports</a>
            <ul class="sousMenu">
                    <li><a href="#">Basket</a></li>
                    <li><a href="#">Roller Derby</a></li>
                    <li><a href="#">Tennis</a></li>
            </ul>
        </li>
	<li><a href="#">Capitales</a>
            <ul class="sousMenu">
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Londres</a></li>
            </ul>
        </li>
	<li><a href="#">Prénoms</a>
            <ul class="sousMenu">
                    <li><a href="#">Emilie</a></li>
                    <li><a href="#">Pierre</a></li>
                    <li><a href="#">Lionel</a></li>
                    <li><a href="#">Virginie</a></li>
                    <li><a href="#">Sebastien</a></li>
            </ul>
        </li>
</ul>

6 responses sur “Menu déroulant en HTML et CSS”

  1. Bonjour à vous,

    Je cherche à mettre un menu déroulant sur le coté gauche de mon site mais je ne comprend pas tout des fonctions évoluées du HTML et du CSS.

    J’ai recopié vos infos telles quelles dans la feuille de style et donné à ma liste les identification de menu et sousMenu mais rien n’y fait.

    Merci de jeter un coup d’œil

    Georges Rouffignac

  2. Bonjour,
    J’aimerai que mon menu figure dans un fichier .html et qu’il soit appelé.
    Quel est le code html pour l’importer (je ne suis pas équipé pour du php, c’est pourquoi, j’ai besoin d’un code php.
    J’ai essayé :
    <!– –> entre 2 balises nav mais ça ne marche pas.
    Merci pour ton aide.
    A+

  3. salut
    merci pour les codes
    j’aimerai garder le menu en vertical. quel est le paramètre en css qui gère ça ?
    excusez mon ignorance par ce que je suis novice.

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *