I’ve been building websites for more than 20 years, and if there’s one thing that separates a forgettable site from one that feels genuinely polished, it’s the navigation — specifically, what happens the moment someone interacts with it.

Most menus just sit there. They function, sure, but they don’t feel like anything. The five techniques below change that, and every one is pure CSS. Copy, paste, tweak, ship.

Every example is a live, working demo. Go ahead — hover, click, and poke at them as you read.

01The Sliding Underline

A classic, and for good reason. Instead of a flat color swap on hover, the underline slides in from one side. Subtle, smooth, and it instantly makes a nav feel deliberate.

The mechanism is a ::after pseudo-element that starts at scaleX(0) and transitions to scaleX(1) on hover. transform-origin: left is what makes it grow from one edge instead of expanding out from the center.

Live Demo

The Code

a {
  position: relative;
  display: inline-block;   /* keeps the underline width reliable */
  padding-bottom: 4px;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e94560;
  transform: scaleX(0);
  transform-origin: left;   /* slide from left — try 'right' or 'center' */
  transition: transform 0.3s ease;
}

a:hover::after {
  transform: scaleX(1);
}

Play with transform-origin. Set it to center and the line expands outward from the middle; set it to right and it reverses direction. One word, completely different feel.

02The Pill Highlighter

You’ve seen this in apps like Linear and Spotify: the current item sits inside a soft, rounded “pill,” and hovering any item gives it a gentle background tint. It makes the nav read as a single UI component rather than a row of links, and it tells people exactly where they are.

Worth being clear about what this is and isn’t. The version in those apps animates a single pill that physically slides between items, and that genuinely needs a little JavaScript (or a modern :has() trick — more on that in a second). What you get below is the clean, pure-CSS foundation: a static active pill plus a smooth hover fade. It looks great on its own, and it’s exactly what you’d build the fancier version on top of.

Live Demo

The Code

nav {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #1e1e30;
  border-radius: 12px;
}

a {
  padding: 10px 20px;
  border-radius: 8px;
  background: transparent;
  color: #8888aa;
  transition: all 0.25s ease;
}

a:hover {
  color: #ffffff;
  background: rgba(233, 69, 96, 0.15);
}

/* Active item — the "pill" */
a.active {
  color: #ffffff;
  background: #e94560;
  box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4);
}

The box-shadow on the active pill is doing real work — that soft glow underneath gives it a subtle lift off the bar. Don’t skip it.

Want the actual slide without JavaScript? If you’re happy going modern-browsers-only, a single shared pill element driven by nav:has(a:nth-child(2):hover) can be translated into place per item. It’s slick, but you’re hardcoding positions, so it’s best when your items are fixed and roughly equal width.

03The JS-Free Hamburger Menu

This one surprises people: a fully functional toggle menu with zero JavaScript. It uses the checkbox hack — a visually hidden checkbox paired with a <label> that acts as the button. Check the box (by clicking the label) and sibling selectors reveal the menu and morph the icon into an X.

It’s not just a parlor trick. For simple sites this is genuinely shippable — with one accessibility caveat I’ll cover under the code.

Live Demo

The HTML

<!-- Order matters: the checkbox must come first -->
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger" aria-label="Toggle menu">
  <span></span><span></span><span></span>
</label>
<div class="menu">
  <a href="/">Home</a>
  <a href="/services">Services</a>
</div>

The CSS

/* Park the checkbox off-screen — NOT display:none — so it
   stays keyboard-focusable. The label is what users click. */
#menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The three bars */
.hamburger {
  position: relative;
  width: 28px;
  height: 20px;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

/* Visible focus ring for keyboard users */
#menu-toggle:focus-visible ~ .hamburger {
  outline: 2px solid #e94560;
  outline-offset: 6px;
}

/* Bars → X */
#menu-toggle:checked ~ .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
#menu-toggle:checked ~ .hamburger span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked ~ .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* Menu hidden by default */
.menu {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Reveal when checked */
#menu-toggle:checked ~ .menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

The accessibility detail most tutorials get wrong: don’t hide the checkbox with display: none. That pulls it out of the tab order, so keyboard users can never open the menu. Park it off-screen instead (1px, opacity: 0) so it stays focusable, then give the label a visible focus ring. That’s the difference between a demo and something you’d actually put in front of users.

The other key: the checkbox, label, and menu must be siblings, and the checkbox has to come first in the source. The ~ (general sibling combinator) only looks forward. Nest the menu inside another element and the selector quietly breaks.

04The Glassmorphism Dropdown

Glassmorphism had its hype cycle, but used with restraint it still looks fantastic. A frosted-glass dropdown feels premium without shouting. The core ingredients: backdrop-filter: blur(), a semi-transparent background, and a thin light border.

Two things to plan for. First, the gap: a dropdown that floats a few pixels below its trigger creates a dead zone the cursor has to cross — and if nothing in that gap is hoverable, the menu vanishes before you reach it. The fix is a transparent “bridge” (a ::before on the menu) that keeps the hover alive across the gap. Second, this is a hover pattern, so it’s a desktop nicety. There’s no hover on touch, so for mobile you’d pair it with the toggle from trick #3 or a few lines of JavaScript.

Live Demo

The Code

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);   /* the visual gap */
  left: 0;
  min-width: 200px;
  padding: 8px 0;

  /* Frosted glass */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);   /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all 0.25s ease;
}

/* Invisible bridge so the cursor can cross the 12px gap
   without the menu closing on the way down */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Reveal on hover */
.dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Fallback for browsers without backdrop-filter:
   a solid background so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or
               (-webkit-backdrop-filter: blur(1px))) {
  .dropdown-menu { background: rgba(20, 20, 40, 0.95); }
}

Two things people get wrong with the look itself: too little blur (go 16px or more, or it reads as muddy rather than frosted) and skipping the border. That hairline border at ~20% white is what sells the glass edge. And always give it that @supports fallback — on a browser without backdrop-filter, a 12%-opacity background is nearly invisible and your text becomes unreadable.

05The Text Roll

This one shows up on a lot of award-winning agency sites, and it’s pure CSS. On hover, the link’s label rolls up and out of view while a second copy rolls up into its place — usually in your accent color. A tiny bit of motion that reads as genuinely crafted.

The trick is two identical labels stacked on top of each other inside a box with overflow: hidden. The box is exactly one line tall, so only the top label shows. On hover, both labels shift up by one line: the first disappears, the second slides in.

Live Demo

The Code

<a class="roll" href="/">
  <span>Home</span>
  <span>Home</span>
</a>

.roll {
  display: inline-block;
  overflow: hidden;
  height: 1.4em;          /* clip to exactly one line */
  line-height: 1.4em;
}

.roll span {
  display: block;
  height: 1.4em;
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* On hover, both labels roll up one line */
.roll:hover span {
  transform: translateY(-100%);
}

/* The second copy is what rolls into view */
.roll span:nth-child(2) {
  color: #e94560;
}

@media (prefers-reduced-motion: reduce) {
  .roll span { transition: none; }
}

Two things make or break it. The box height has to match your line-height exactly, or a sliver of the second label peeks out at rest. And the easing matters more than the duration — that cubic-bezier(0.65, 0.05, 0.36, 1) ramp gives it a confident, mechanical snap, where a plain ease feels mushy.

Because it fires on hover, it works anywhere on the page — no page-load timing to coordinate. And the same stacked-label structure scales to other ideas: an arrow that slides in, a label that swaps to an icon, or a two-line “Services → View all” reveal.

Wrapping Up

None of this is complicated — that’s the whole point. A few lines of CSS, no JavaScript dependencies, no packages, no build step. Just clean, intentional motion that signals someone actually cared about the details.