JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ignorant offset">
  <li>I should be ignorant of your pointer. If you see me, something went wrong!</li>
</ul>

CSS

ul {
  max-height: 0;
 // overflow: hidden;
  margin: 10px;
  padding: 0;
  border: 10px solid #bada55;
  list-style-type: none;
  transition: border-color .4s;
}

ul:hover {
  max-height: 100px;
  border-color: #de2d26;
}

ul > li {
  padding: 10px;
  pointer-events: auto;
  position: relative;
  top: 100px;
  background: yellow;
}

.ignorant {
  pointer-events: none;
}

.offset {
  position: relative;
}