<!--
Forum answer only:

https://www.sitepoint.com/community/t/absolutely-positioned-elements-collapse/377637/7

No real use to anyone else .
-->
<div class="drinks">
  <span>Coffee</span>
  <span class="sub">Tea</span>
  <span class="sub">Milk</span>
  <span class="sub">Water water</span>
</div>
<p>This is some text that goes underneath This is some textThis is some textThis is some textThis is some textThis is some textThis is some text .</p>
.drinks {
  height: 2rem;
  line-height: 1rem;
  display: inline-grid;
  position: relative;
}
.drinks span {
  display: block;
  padding: 0.5rem 5px;
  background: red;
}
span.sub {
  padding: 5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  transform: translateX(-100vw);
}
.drinks:hover span.sub {
  transform: translateX(0);
}
span.sub:hover {
  background: #666;
}
p {
  margin: 0 0 1rem;
}
/*

Forum answer only:

https://www.sitepoint.com/community/t/absolutely-positioned-elements-collapse/377637/7

No real use to anyone else


*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.