WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemple de code de menu déroulant HTML
796
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 July 2025
Bulle de message HTML avec conception SVG
31 October 2023
Jeu de Serpent simple
28 August 2025
Modèle HTML d'application de streaming musical avec Tailwind
HTML
Copy
Dropdown Menu
Categories
Category 1
Category 2
Category 3
CSS
Copy
ul { list-style: none; padding: 0; } .dropdown { display: none; background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; position: absolute; margin-top: 5px; } .dropdown li { padding: 5px 0; } .separator { height: 1px; background: #ccc; margin: 5px 0; } .show { display: block; }
JS
Copy
document.querySelectorAll('.dropdown-toggler').forEach(toggler => { toggler.addEventListener('click', function (e) { e.preventDefault(); const dropdownId = this.getAttribute('data-dropdown'); const dropdown = document.getElementById(dropdownId); dropdown.classList.toggle('show'); }); }); // Fermer les menus si on clique ailleurs window.addEventListener('click', function (e) { document.querySelectorAll('.dropdown').forEach(dropdown => { if (!dropdown.parentElement.contains(e.target)) { dropdown.classList.remove('show'); } }); });