CSS Dropdowns

CSS Dropdowns

CSS dropdown menus are used to hide and show content when the user interacts with a navigation item. Dropdowns are commonly used in navigation bars and menus.

In this lesson, we create dropdowns using only CSS and the :hover pseudo-class.

Dropdown Intro

A basic dropdown consists of a trigger element and a hidden menu.

<div class="dropdown">
  <button class="dropbtn">Menu</button>
  <div class="dropdown-content">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</div>

Hover Dropdown

The dropdown menu is hidden by default and shown on hover.

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Navbar Dropdown

Dropdowns are often used inside navigation bars.

.nav-item {
  position: relative;
}

.nav-item .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
}

.nav-item:hover .submenu {
  display: block;
}

You can style submenu links the same way as normal nav links.

.submenu a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #222;
}

.submenu a:hover {
  background: #eef3ff;
  color: #1f4bd8;
}

Accessibility Note

CSS-only dropdowns using :hover may not work well on touch devices. JavaScript or focus-based techniques are recommended for production use.

Code Challenge

Goal: Create a dropdown menu inside a navigation bar.

HTML:

<ul class="nav-horizontal">
  <li class="nav-item">
    <a href="#">Services</a>
    <div class="submenu">
      <a href="#">Web Design</a>
      <a href="#">SEO</a>
      <a href="#">Marketing</a>
    </div>
  </li>
</ul>

Task:

• Hide the submenu by default
• Show the submenu on hover
• Position the submenu below the parent link
• Add borders and hover styles

Try a Solution:

.nav-item {
  position: relative;
  list-style: none;
}

.nav-item > a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #222;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 6px 0;
}

.nav-item:hover .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #222;
}

.submenu a:hover {
  background: #eef3ff;
  color: #1f4bd8;
}

What’s Next?

Next, you will learn how to build image galleries using CSS.