CSS Tutorial

CSS Dropdowns

A dropdown reveals extra links or content when the user hovers over a trigger. With just position and the :hover selector you can build a fully working dropdown menu in pure CSS - no JavaScript required. This guide walks through a basic dropdown and then a complete navbar with a dropdown item.

How a CSS Dropdown Works

The trick behind a hover dropdown is three pieces working together. A wrapper with position: relative anchors the menu. The dropdown content is set to display: none so it stays hidden and positioned absolutely underneath the wrapper. When the user hovers the wrapper, a :hover rule flips the content to display: block, revealing it.

The core pattern

.dropdown { position: relative; }
.dropdown-content { display: none; position: absolute; }
.dropdown:hover .dropdown-content { display: block; }

Basic Hover Dropdown

Hover over the button in the example below and a panel of links appears. Because the dropdown content is inside the .dropdown wrapper, hovering anywhere over the wrapper keeps the menu open.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .dropdown { position: relative; display: inline-block; }
  .dropbtn { background: #0f766e; color: #fff; padding: 12px 18px; border: none; border-radius: 6px; cursor: pointer; }
  .dropdown-content { display: none; position: absolute; background: #fff; min-width: 180px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-radius: 6px; overflow: hidden; }
  .dropdown-content a { display: block; color: #0f172a; padding: 12px 16px; text-decoration: none; }
  .dropdown-content a:hover { background: #f1f5f9; }
  .dropdown:hover .dropdown-content { display: block; }
  .dropdown:hover .dropbtn { background: #0d5f59; }
</style>
</head>
<body>
  <div class="dropdown">
    <button class="dropbtn">Menu &#9662;</button>
    <div class="dropdown-content">
      <a href="#">Profile</a>
      <a href="#">Applications</a>
      <a href="#">Settings</a>
      <a href="#">Log out</a>
    </div>
  </div>
</body>
</html>

💡

Give the trigger button and the dropdown content the same width, or set a min-width on the content, so the menu lines up neatly under the button.

Positioning the Dropdown

Because the content uses position: absolute, it is placed relative to the nearest positioned ancestor (the .dropdown wrapper with position: relative). Use these offsets to control where it appears.

Declaration	Effect
position: relative (wrapper)	Anchors the absolute menu to the trigger
position: absolute (content)	Removes the menu from normal flow
top: 100%	Places the menu directly below the trigger
right: 0	Aligns the menu to the right edge (avoids off-screen overflow)
min-width	Keeps the menu at least as wide as its links

Dropdown Inside a Navigation Bar

Dropdowns shine inside navbars. Here a horizontal navigation bar has one item, Services, that opens a submenu on hover while the other links behave normally.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; margin: 0; }
  .navbar { display: flex; background: #1e293b; }
  .navbar a { color: #cbd5e1; padding: 14px 18px; text-decoration: none; }
  .navbar a:hover, .dropdown:hover .dropbtn { background: #334155; color: #fff; }
  .dropdown { position: relative; }
  .dropbtn { color: #cbd5e1; padding: 14px 18px; background: none; border: none; font: inherit; cursor: pointer; }
  .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 190px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); z-index: 10; }
  .dropdown-content a { color: #0f172a; display: block; padding: 12px 16px; }
  .dropdown-content a:hover { background: #f1f5f9; }
  .dropdown:hover .dropdown-content { display: block; }
</style>
</head>
<body>
  <div class="navbar">
    <a href="#home">Home</a>
    <div class="dropdown">
      <button class="dropbtn">Services &#9662;</button>
      <div class="dropdown-content">
        <a href="#">Resume Review</a>
        <a href="#">Mock Interviews</a>
        <a href="#">Career Coaching</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
  </div>
</body>
</html>

⚠️

Add a z-index to the dropdown content so it layers above the rest of the page. Without it, following content can render on top of your menu and swallow the clicks.

Accessibility Note

A pure :hover dropdown does not open with the keyboard and does not work well on touch screens, where there is no hover. For production menus, enhance it with a :focus-within rule or a small amount of JavaScript that toggles a class on click and manages aria-expanded.

Key points

Wrapper gets position: relative; content gets position: absolute.
Hide the content with display: none, then reveal it with a :hover rule.
Add min-width and a box-shadow so the menu reads as a distinct panel.
Give the dropdown a z-index so it sits above other page content.
Consider :focus-within or JavaScript to make the dropdown keyboard and touch friendly.