How to create a CSS-only dropdown menu

· Category: HTML & CSS

Short answer

A CSS-only dropdown uses nested lists and reveals the submenu on :hover or :focus-within, ensuring it works for mouse and keyboard users without JavaScript.

Steps

  1. Nest a <ul> submenu inside a parent <li>.
  2. Hide the submenu with display: none or opacity + visibility.
  3. Reveal it when the parent is hovered or contains focused elements.
  4. Position the submenu absolutely so it does not disrupt the layout.

Example

.nav li {
  position: relative;
}
.nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.nav li:hover > ul,
.nav li:focus-within > ul {
  display: block;
}

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li>
    <a href="/services">Services</a>
    <ul>
      <li><a href="/web">Web</a></li>
      <li><a href="/design">Design</a></li>
    </ul>
  </li>
</ul>

Tips

  • Ensure the parent <li> or <a> is focusable so keyboard users can open the menu.
  • Add a small transition delay on hover-out to prevent accidental menu disappearance.
  • For production, consider enhancing with JavaScript for click-to-toggle and ARIA support.