.icon-dropdown-wrapper { position: relative; /* So the dropdown is positioned relative to this container */ display: inline-block; /* So the icon and dropdown align nicely */ } .icon-dropdown-btn { cursor: pointer; font-size: 24px; /* Adjust icon size */ } .icon-dropdown-content { position: absolute; top: 40px; /* Distance below the icon */ right: 0; /* Aligns dropdown to the right edge of the icon, adjust as needed */ background: #fff; border: 1px solid #ccc; padding: 10px; display: none; /* Hidden by default */ box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 9999; /* Ensure it's on top of other elements */ } .icon-dropdown-content.active { display: block; /* Show when active */ } document.addEventListener('DOMContentLoaded', function() { const iconBtn = document.querySelector('.icon-dropdown-btn'); const dropContent = document.getElementById('dropContent'); iconBtn.addEventListener('click', function() { // Toggle the "active" class to show/hide dropContent.classList.toggle('active'); }); // Optional: close if clicked outside document.addEventListener('click', function(e) { if (!iconBtn.contains(e.target) && !dropContent.contains(e.target)) { dropContent.classList.remove('active'); } }); });