Component Deep Dive #9: Dropdown Menu — Hover vs Click Is a Philosophical Question

#javascript #css #frontend #webdev

This component is from Web Component Dictionary v2.0 — 83 components, bilingual, live preview, zero dependencies.

The dropdown menu looks simple but is notoriously tricky. The biggest philosophical question: hover or click?

Hover vs Click

Hover: Smooth on desktop, but breaks on mobile (no hover event). iOS "sticks" after first touch.

Click: Universal, mobile-friendly, but adds an extra interaction.

Best practice: Use click for consistency. Or use @media (hover: hover) to switch between modes.

The Flicker Problem

Moving mouse from trigger to submenu through a gap causes the menu to flicker and disappear. Solution: eliminate gaps — set menu top: 100% flush against trigger.

Click Mode Implementation

trigger.addEventListener('click', function(e) {
  e.stopPropagation();
  menu.classList.toggle('open');
});

// Close on outside click
document.addEventListener('click', function(e) {
  if (!e.target.closest('.dropdown')) {
    menu.classList.remove('open');
  }
});

// Close on Escape
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') menu.classList.remove('open');
});

CSS Essentials

.dd-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 99;
}
.dd-menu.open { display: block; animation: fadeIn 0.2s; }

Common Pitfalls

Mobile hover traps: Use @media (hover: hover) or click-only
Scroll bleed-through: Add overflow: hidden to body when open
Keyboard accessibility: Use role="menuitem", support arrow key navigation

Variants

Multi-level nesting: Sub-menus within sub-menus
Split button: Main action + dropdown arrow
Searchable: Command-palette style with filter input
Context menu: Right-click triggered, follows mouse position

Web Component Dictionary v2.0 — 83 components, 8 categories, bilingual, $1.99. Live preview

DEV Community