Hover Dropdown Menu

A navigation dropdown that opens on hover using :hover and visibility.

Published May 19, 2026

Demo

HTML
				
				<div class="dropdown">
  <span class="dropdown-trigger">Menu</span>
  <div class="dropdown-menu">
    <a href="#">Item one</a>
    <a href="#">Item two</a>
  </div>
</div>

			

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

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid #e2e2e8;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

			

How it works

visibility:hidden + opacity:0 hides the menu while keeping it in the layout flow for transitions. opacity alone can't be transitioned to/from display:none. Using visibility allows a transition on opacity, then visibility jumps to hidden after the fade completes. The parent :hover selector reveals the child menu.