Popout menu

CSS, Interactivity · Dec 30, 2020

Reveals an interactive popout menu on hover/focus.

  • Use left: 100% to move the popout menu to the right of the parent.
  • Use visibility: hidden to hide the popout menu initially, allowing for transitions to be applied (unlike display: none).
  • Use the :hover, :focus and :focus-within pseudo-class selectors to apply visibility: visible to the popout menu, displaying it when the parent element is hovered/focused.
Popout menu
<div class="reference" tabindex="0">
  <div class="popout-menu">Popout menu</div>
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 80px;

.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #9C27B0;
  color: white;
  padding: 16px;

.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;

More like this

  • CSS Hover Effects

    A collection of cool CSS hover effects to spice up your next web project.

    Collection · 10 snippets

  • Hamburger Button

    Displays a hamburger menu which transitions to a cross button on hover.

    CSS, Interactivity · Dec 30, 2020

  • Sibling fade

    Fades out the siblings of a hovered item.

    CSS, Interactivity · Dec 30, 2020

  • Horizontal scroll snap

    Creates a horizontally scrollable container that will snap on elements when scrolling.

    CSS, Interactivity · Oct 11, 2021