About this snippet

Improve your navigation with this clean dropdown menu. The menu appears on hover with a slight lift animation, and the items are styled with plenty of padding for easy clicking.

Size
1.3 KB
Uses
HTML, CSS
Loads
Nothing external
Views
538
<div class="dropdown">
  <button class="drop-btn">Services &#9662;</button>
  <div class="dropdown-content">
    <a href="#">Web Design</a>
    <a href="#">SEO Analysis</a>
    <a href="#">Marketing</a>
    <a href="#">Consulting</a>
  </div>
</div>
.dropdown {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  display: inline-block;
}
.drop-btn {
  background-color: #fff;
  color: #1f2937;
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}
.drop-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-radius: 12px;
  z-index: 1;
  top: 110%;
  left: 0;
  overflow: hidden;
  border: 1px solid #f3f4f6;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.dropdown-content a {
  color: #4b5563;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background 0.2s;
}
.dropdown-content a:hover {
  background-color: #f9fafb;
  color: #2563eb;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save