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

Syntax

css

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

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>

Live Example

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