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>
  • 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

  • ded

    bonjour je cherche comment faire un menu déroulant a porte de mains de niveau terminal .. si quelqu’un pourrait m aider :p Merci d avance

  • Caroline

    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+

  • hamid

    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.

  • Lefta

    Didi59 : Remplace juste le texte par une balise . Exemple ici : http://www.theeternallegend.cloudns.org (le drapeau en haut à gauche). Le css est pas encore tout à fait au top à l’heure où j’écris, mais j’y travaille.
    @L’auteur : Euh, je voudrais pas faire mon chieur, mais je crois qu’il y a un s à LondreS ^^

  • Didi59

    Bonjour comment intégrer une image dans le bloc menu à la place d’un bloc avec du texte svp?

    Merci