Notice: La fonction _load_textdomain_just_in_time a été appelée de façon incorrecte. Le chargement de la traduction pour le domaine fcc a été déclenché trop tôt. Cela indique généralement que du code dans l’extension ou le thème s’exécute trop tôt. Les traductions doivent être chargées au moment de l’action init ou plus tard. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 6.7.0.) in /home/canaawnt/sites/formation/wp-includes/functions.php on line 6131
Menu déroulant avec HTML et CSS | Formation

Menu déroulant avec HTML et CSS

Dans ce tutoriel HTML et CSS, nous allons voir comment mettre en place un menu déroulant.

Un menu déroulant permet de masquer et de afficher des éléments de la page en fonction du survol de l’utilisateur. Il est utilisé pour afficher des sous-menus.

Consulter le tutoriel sur Youtube

Pour réaliser ce menu déroulant, nous allons utiliser les langages de développement web HTML et CSS.

Structure du HTML

Tout d’abord, nous allons définir la structure HTML de notre menu. Par exemple :

<nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Aliments</a>
            <ul>
                <li><a href="#">Fruits</a></li>
                <li><a href="#">Légumes2</a></li>
                <li><a href="#">Poissons</a></li>
                <li><a href="#">Viandes</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Ici on utilise la balise <nav> pour indiquer que nos liens font partie de la navigation de notre site. Vous pouvez voir que dans les attributs « href » des liens, j’ai mis un « # » à vous de remplacer pour les liens de vos pages.