5 Easy and Coool CSS Menu Tricks

I’ve been building websites for over 20 years now, and if there’s one thing that separates a “meh” site from one that actually feels polished — it’s the navigation. Specifically, what happens when someone interacts with it.

Most menus just sit there. They work, sure. But they don’t feel like anything. These five CSS tricks change that — and the best part? No JavaScript required. Pure CSS. Copy, paste, tweak, ship.

Every example below is a live, working demo. Go ahead and hover over stuff.

1. The Sliding Underline

This one’s a classic for a reason. Instead of a boring color swap on hover, the underline slides in from the left. It’s subtle, it’s smooth, and it immediately makes your nav feel intentional.

The trick is using a ::after pseudo-element that starts at scaleX(0) and transitions to scaleX(1) on hover. Setting transform-origin: left makes it slide in from one direction instead of expanding from the center.

Live Demo:

The Code:

/* The magic is all in the ::after pseudo-element */
a {
  position: relative;
  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 — change to 'right' or 'center' */
  transition: transform 0.3s ease;
}

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

Play with the transform-origin value. Set it to center and it expands outward from the middle. Set it to right and it slides the other way. Small change, totally different feel.

2. The Pill Highlighter

You’ve seen this on apps like Spotify and Linear. The active menu item gets a soft, rounded background “pill” behind it. It makes the whole nav feel more like a UI component than a list of links — and users love it because it clearly tells them where they are.

We’re faking the sliding effect here with a background transition. In production you’d use a bit of JS to actually slide a single element between items, but the CSS-only version still looks great.

Live Demo:

The Code:

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

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

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

/* Active state — 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 state is doing a lot of heavy lifting here. That soft glow underneath the pill makes it feel almost three-dimensional. Don’t skip it.

3. Pure CSS Hamburger Menu (No JS, Really)

Okay, this one blows people’s minds when they realize there’s zero JavaScript involved. We’re using the ol’ checkbox hack — a hidden checkbox input paired with a label that acts as the toggle button. When the checkbox is checked, sibling selectors reveal the menu.

It’s not just a party trick either. This is legitimately production-ready for simple sites.

Live Demo:

The HTML:

<!-- The HTML structure matters here -->
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger">
  <span></span><span></span><span></span>
</label>
<div class="menu">
  <a href="#">Home</a>
  <a href="#">Services</a>
</div>

The CSS:

/* Hide the checkbox, style the label as the burger */
#menu-toggle { display: none; }

/* Three lines to X animation */
#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;
}

/* Show menu when checked */
.menu {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.3s ease;
}

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

The key insight: the checkbox, label, and menu all need to be siblings in the DOM. The ~ (general sibling combinator) is what connects them. If you nest the menu inside something else, the selector breaks and nothing happens.

4. Glassmorphism Dropdown

Glassmorphism had its hype cycle a couple years ago, but honestly? It still looks fantastic when used with restraint. A frosted-glass dropdown menu feels premium without being obnoxious. The key ingredients are backdrop-filter: blur(), a semi-transparent background, and a subtle border.

Fair warning: backdrop-filter doesn’t work in every browser, but support is solid now — around 95%+ globally. Good enough for 2026.

Live Demo:

The Code:

/* The frosted glass effect */
.dropdown-menu {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);  /* Safari still needs this */
  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;
}

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

Two things people get wrong with glassmorphism: not enough blur (go 16px minimum or it just looks muddy), and forgetting the border. That thin white border at 20% opacity is what sells the “glass edge” effect. Without it, it’s just a blurry box.

5. The Staggered Fade-In

This last one is more of a “moment” than a constant effect. When the page loads (or when a mobile menu opens), each menu item fades in one after another with a slight delay. It’s the kind of detail that makes someone go “oh, that’s nice” without being able to pinpoint exactly why.

The trick is dead simple: same animation on every item, different animation-delay values.

Live Demo:

The Code:

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Start invisible, animate in */
nav a {
  opacity: 0;
  animation: fadeSlideIn 0.5s ease forwards;
}

/* Stagger each item */
nav a:nth-child(1) { animation-delay: 0.1s; }
nav a:nth-child(2) { animation-delay: 0.2s; }
nav a:nth-child(3) { animation-delay: 0.3s; }
nav a:nth-child(4) { animation-delay: 0.4s; }
nav a:nth-child(5) { animation-delay: 0.5s; }

Pro tip: keep the total stagger under 600ms. If the last item takes a full second to appear, it stops feeling elegant and starts feeling slow. 80-100ms between items is the sweet spot. And translateY(15px) is plenty of movement — go much higher and it gets distracting.

Wrapping Up

None of these tricks are complicated. That’s kind of the point. A couple lines of CSS, no JavaScript dependencies, no npm packages, no build step. Just clean, intentional motion that makes your site feel like someone actually cared about the details.

If you want help implementing any of this on your own site — or you’re looking for a full redesign that sweats the small stuff like this — let’s talk.