CSS Hover Dropdown Menu — Pure CSS Snippet

A CSS-only hover dropdown menu is one of the most-searched navigation snippets because developers want a multi-level nav (like a mega menu) that opens on hover without writing any JavaScript. This snippet is a complete, polished hover menu: top-level items, dropdown panels that fade and slide in, a rotating caret, the all-important invisible hover bridge so the menu does not vanish as you move toward it, and :focus-within so it also opens for keyboard users. It is 100% CSS — there is no script at all.

How a CSS-only dropdown opens

The trick is the descendant combinator with :hover. Each menu item that has a submenu is a .has-drop with position: relative, and its panel .drop is position: absolute beneath it. The panel is hidden by default and revealed with the single rule .has-drop:hover .drop — "when the parent item is hovered, show the child panel." No class toggling, no event listeners (unlike the JS-driven dropdown menu); the browser's hover state does all the work. This is the canonical pure-CSS dropdown pattern, and it is genuinely useful for marketing navs where hover-to-open is the expected behavior.

Animating in: visibility + opacity + transform

A common mistake is hiding the panel with display: none, which cannot be transitioned, so the menu pops in abruptly. This snippet instead hides it with opacity: 0; visibility: hidden; transform: translateY(8px) and reveals it with opacity: 1; visibility: visible; transform: translateY(0). The transition animates all three, so the panel fades and slides down smoothly. visibility is included (not just opacity) so the hidden panel cannot be clicked or focused while invisible, and because visibility is transitionable it delays correctly on the way out. This opacity-plus-visibility combo is the right way to animate a show/hide that display: none cannot.

The invisible hover bridge — the part that makes it usable

The single biggest flaw in naive CSS dropdowns is that the panel is positioned with a gap below the trigger (here top: calc(100% + 8px)), so when you move the cursor from the menu item down toward the panel, it crosses empty space, loses :hover, and the menu snaps shut before you reach it. This snippet fixes that with an invisible bridge: .has-drop::after is an empty pseudo-element spanning the full width of the trigger and height: 12px below it, covering the gap. Because the bridge is part of the .has-drop element, hovering it keeps :hover alive, so the cursor can travel from trigger to panel without the menu closing. This one detail is the difference between a frustrating demo and a dropdown people can actually use.

The rotating caret

Each dropdown trigger has a caret SVG that rotates 180° when its menu opens, via .has-drop:hover .arr { transform: rotate(180deg) } with a transition: transform 0.2s. The caret uses stroke: currentColor so it automatically matches the link's text color, including the hover color change. This gives the universal "this item expands" affordance and visual confirmation that the menu is open.

Keyboard support with :focus-within

Hover-only menus exclude keyboard users, so this snippet adds .has-drop:focus-within .drop alongside the hover rule. :focus-within matches an element when it or any descendant has focus, so when a keyboard user tabs into the trigger link, the panel opens and stays open while focus is anywhere inside it — letting them tab through the submenu links. This makes the menu operable by keyboard without any JavaScript, a meaningful accessibility improvement over hover-only CSS dropdowns. For full WAI-ARIA menu semantics (arrow-key navigation, Escape to close, aria-expanded) you would add a small script, but :focus-within covers the essential keyboard case for a navigation menu.

The panel content layout

Each dropdown link is a two-line item — a bold <strong> label and a small <span> description — laid out as a flex column, the rich "mega-menu lite" style used by modern SaaS navs. Links show a soft tinted background on hover. Because the items are just anchors in a flex column, you can add icons, badges, or section headings, or widen the panel and switch to a multi-column grid for a full mega menu. The panel has a generous box-shadow and rounded corners so it reads as a floating surface above the page.

Customizing the menu

Re-theme by changing the link hover colors, the caret/accent color, and the panel's border and shadow. Adjust the open animation by editing the translateY(8px) offset and the 0.2s durations. Change the bridge height (12px) to match your trigger-to-panel gap. To right-align a panel that would overflow the viewport, set right: 0 instead of left: 0 on that .drop. To turn a panel into a mega menu, increase its min-width and lay the links out in a CSS grid. Because the whole menu is declarative CSS, it is easy to extend without touching any logic.