30-seconds-of-code/snippets/popout-menu.md

Popout menu

Reveals an interactive popout menu on hover.

HTML

<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

CSS

.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

Demo

Popout menu

<style> .snippet-demo__reference { background: linear-gradient(135deg, #ff4c9f, #ff7b74); height: 75px; width: 75px; position: relative; will-change: transform; } .snippet-demo__popout-menu { position: absolute; visibility: hidden; left: 100%; background: #333; color: white; font-size: 0.9rem; padding: 0.4rem 0.8rem; width: 100px; text-align: center; } .snippet-demo__reference:hover > .snippet-demo__popout-menu { visibility: visible; } </style>

Explanation

1. position: relative on the reference parent establishes a Cartesian positioning context for its child.
2. position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
3. left: 100% moves the the popout menu 100% of its parent's width from the left.
4. visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
5. .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.

Browser support

✅ No caveats.