CSS Dropdowns

Imagine walking up to a restaurant's digital ordering kiosk. By default, the screen is clean, showing only major food categories. But when you hover your finger over Drinks, a hidden side menu slides open, showing soda, juice, and water options. CSS dropdowns are those hidden side menus. They keep your site clean by hiding sub-menus, lists, or instructions under a single parent element, displaying them automatically on hover.

In this page:

The Dropdown Concept
Absolute Positioning inside Relative Parents
Styling the Hover Content Panel
Dropdowns inside Navigation Bars
Accessible Focus-Within Dropdowns

The Dropdown Concept

A dropdown menu consists of two parts: a visible trigger element (like a button or link) and a hidden content container. We use the hover state of the parent element to toggle the display property of the content container from none to block.

Note: Use a clear arrow symbol (like ▾) inside your trigger text to let users know that a dropdown menu exists.

Warning: Dropdown menus that only work on hover can be difficult for mobile and touch-screen users to open.

Example: The Dropdown Concept

css

<style>
.dropdown-content {
  display: none;
  background: lightyellow;
  padding: 8px;
  border: 1px solid #ccc;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">Hidden until hovered</div>
</div>

Absolute Positioning inside Relative Parents

To prevent your dropdown menu from pushing your other page content down when it opens, you must set its position property to absolute. This removes the sub-menu from the normal page flow and lets it float freely on top of other elements.

Note: Always set position: relative on the parent dropdown container to anchor your absolute sub-menu correctly.

Warning: Ensure your dropdown content has a defined background color and a high z-index to keep it from rendering behind page elements.

Example: Absolute Positioning inside Relative Parents

css

<style>
.dropdown {
  position: relative;
}
.dropdown-content {
  position: absolute;
  display: none;
  background: lightyellow;
  padding: 8px;
  border: 1px solid #ccc;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">Floats without pushing content down</div>
</div>

Styling the Hover Content Panel

You can group standard anchor links inside your dropdown menu to build clean, multi-page navigation menus. Styling these links to use full-width block displays makes clicking them easy.

Note: Set link anchors inside your dropdown content to block display with padding to make the entire link row clickable.

Warning: Make sure your sub-menu links have high color contrast to stay readable.

Example: Styling the Hover Content Panel

css

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: lightyellow;
  border: 1px solid #ccc;
  width: 150px;
}
.dropdown-content a {
  display: block;
  padding: 8px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  Menu
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </div>
</div>

Dropdowns inside Navigation Bars

You can integrate dropdown sub-menus directly inside your horizontal navigation bars, allowing you to nest groups of tools or secondary pages under a single, neat menu button.

Note: Use float: left or display: inline-block to align your navigation items and dropdown triggers side-by-side cleanly.

Warning: Make sure your navigation dropdowns have high z-index values so they do not render behind main page elements.

Example: Dropdowns inside Navigation Bars

css

<style>
nav {
  background: #eee;
  padding: 8px;
}
nav li {
  display: inline-block;
  position: relative;
}
nav .dropdown-content {
  display: none;
  position: absolute;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
nav li:hover .dropdown-content {
  display: block;
}
</style>
<nav>
  <ul>
    <li>Tools
      <div class="dropdown-content">Sub Item</div>
    </li>
  </ul>
</nav>

Accessible Focus-Within Dropdowns

Dropdown menus that only open on mouse hover are inaccessible to keyboard-only users who navigate using the Tab key. By using the :focus-within pseudo-class, you can ensure your dropdowns open automatically when a user tabs into any element inside the dropdown block.

Note: Combine :hover and :focus-within selectors to make your dropdowns fully accessible and responsive.

Warning: Failing to design for keyboard focus makes your interactive menus completely unusable for visually impaired screen-reader users.

Example: Accessible Focus-Within Dropdowns

css

<style>
.dropdown-content {
  display: none;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <a href="#">Menu</a>
  <div class="dropdown-content"><a href="#">Item</a></div>
</div>

Common Mistakes

Forgetting to set position: absolute on the dropdown sub-menu, causing it to push other page content down when it opens.
Omitting position: relative on the parent container, which makes the absolute sub-menu drift to the side of the screen.
Designing dropdowns that only open on hover, locking out mobile touch-screen and keyboard-only users.

Chapter Summary

Dropdown menus hide secondary content and links cleanly, displaying them automatically on hover.
Set your dropdown content to position: absolute to let it float on top of other content cleanly without moving page elements.
Pair hover states with the :focus-within pseudo-class to ensure your dropdown menus are fully accessible and support keyboard navigation.

Browser Support

Standard absolute-positioned dropdowns and basic hover state pseudo-classes are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Horizontal Navbar Next Lesson → CSS Advanced Dropdowns