WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Dropdown Menu Code Snippet
36
irismomo62
Open In Editor
Publish Your Code
Recommended
21 December 2024
A Code by cleancloud166
30 January 2025
CodePen Home Draw a Heart ❤️✍️
10 February 2025
Simple HTML Login Form
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'); } }); });