CssHow-ToBeginner · 4 min read

How to Create Dropdown Menu in CSS: Simple Guide

To create a dropdown menu in CSS, use a container with position: relative and a hidden submenu with position: absolute. Show the submenu on hover using the :hover selector to change its display or visibility property.

📐

Syntax

A dropdown menu uses a parent container with position: relative to hold the menu items. The submenu is inside this container with position: absolute and initially hidden using display: none or visibility: hidden. When the user hovers over the parent, the submenu becomes visible using :hover.

position: relative: sets the reference point for the submenu.
position: absolute: places submenu relative to parent.
display: none: hides submenu initially.
:hover: triggers submenu to show on mouse hover.

css

/* Parent container */
.menu {
  position: relative;
  display: inline-block;
}

/* Submenu hidden by default */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  min-width: 160px;
  z-index: 1;
}

/* Show submenu on hover */
.menu:hover .submenu {
  display: block;
}

💻

Example

This example shows a simple dropdown menu with a main button and a submenu that appears when you hover over it. The submenu items are clickable links.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Dropdown Menu Example</title>
<style>
  .menu {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
  }
  .menu button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
  }
  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    min-width: 160px;
    z-index: 1;
  }
  .submenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .submenu a:hover {
    background-color: #f1f1f1;
  }
  .menu:hover .submenu {
    display: block;
  }
</style>
</head>
<body>
  <div class="menu">
    <button aria-haspopup="true" aria-expanded="false">Menu ▼</button>
    <div class="submenu" role="menu">
      <a href="#home" role="menuitem">Home</a>
      <a href="#services" role="menuitem">Services</a>
      <a href="#contact" role="menuitem">Contact</a>
    </div>
  </div>
</body>
</html>

Output

A blue button labeled 'Menu ▼' on a white background. When hovered, a white box with shadow appears below the button showing three clickable links: Home, Services, Contact.

⚠️

Common Pitfalls

Common mistakes include:

Not setting position: relative on the parent, so the submenu does not position correctly.
Using visibility: hidden without changing it on hover, so submenu never appears.
Forgetting to set z-index on submenu, causing it to appear behind other elements.
Not making submenu keyboard accessible or missing ARIA roles for accessibility.

css

/* Wrong: submenu not positioned because parent lacks relative positioning */
.menu {
  display: inline-block;
}
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
.menu:hover .submenu {
  display: block;
}

/* Right: add position relative to parent */
.menu {
  position: relative;
  display: inline-block;
}

📊

Quick Reference

Tips for CSS Dropdown Menus:

Use position: relative on the container to anchor submenu.
Hide submenu initially with display: none.
Show submenu on :hover of parent.
Use position: absolute on submenu for correct placement.
Include z-index to keep submenu on top.
Add ARIA roles and keyboard support for accessibility.

✅

Key Takeaways

Set the parent container to position relative to position the dropdown submenu correctly.

Hide the submenu by default and show it on parent hover using CSS :hover selector.

Use position absolute on the submenu for proper placement below the parent.

Add z-index to ensure the submenu appears above other content.

Remember accessibility: use ARIA roles and keyboard navigation support.