CSS dropdown menus

Pure-CSS hamburger menu using the checkbox hack — three lines morph into an X with no JavaScript.

A segmented pill tab control with a floating indigo indicator that snaps to the selected option via :has().

A native <details>-based dropdown that animates open, with arrow rotation and hover-highlighted menu items.

A breadcrumb trail with chevron separators that nudge forward on hover, and a bolded current page.

Slate pill nav with the active item highlighted in blue.

Inline nav with active item marked by an ocean gradient underline.

Frosted floating dock whose icons spring up and take on the ocean gradient under the pointer.

Sticky-header pill navigation on a blurred translucent bar, with a blue active state.

Docs breadcrumb with CSS-drawn chevrons and a blue current page.

Frosted mobile tab bar where the active item takes an ocean tint and lifts its icon.

Vertical nav whose active marker grows from the centre out, so hover and selected read as the same gesture at two lengths.

Dropdown panel opening on hover and on `:focus-within`, so it is reachable by keyboard, with `visibility` transitioned so it is not tabbable while faded out.

Right-click menu with a rule between groups and each item's binding right-aligned, dimmed until the row is hovered so the shortcuts do not compete.

Page links with an elided middle and tabular numerals, so widths stay even from page 2 to page 18 and the control never reflows.

Compact product header carrying mark, search, links and account in one blurred row, the search flexing so the ends stay pinned at any width.

Segmented flow header where each step's arrow is a rotated square inheriting its own background, so the notch always matches the segment behind it.

Language menu listing each option in its own script rather than in the current one, with the ISO code trailing so the list stays scannable to someone who cannot read the endonym.

Three-column link map under a gradient border-image rule, each link underlining from its leading edge so the columns stay quiet until something is pointed at.

Nav split by labelled section with the active row marked by a rail bleeding past the panel padding, so the indicator belongs to the sidebar rather than the item.

Mobile tab bar whose primary action sits raised in the middle, punched out of the bar by a ring shadow in the bar's own colour rather than by a real cut-out.

Docs-style on-this-page list where the indigo rail marker jumps to whichever heading is hovered.

A fuchsia hub button that spins into an X while four actions fan out along an arc on hover.

Horizontal nav where hovering the Products link drops a sky-outlined panel of sub-links into view.

Slanted parallelogram tabs where the orange fill wipes out of the active tab and into the hovered one.