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>

Publié par scoco

Auteur et principal acteur de ce blog. Entre le Roller Derby, le longboard, les geekeries et d'autres trucs, je parle un peu de tout.