Delayed dropdown in CSS

by IceCreamYou

HTML

<div class="dropdown-container">
  <div class="dropdown-label normalize">Parent</div>
  <div class="dropdown normalize">Child</div>
</div>
<div class="overlaid normalize">Overlaid</div>

CSS

body {
  margin: 0;
}
.normalize {
  background-color: #EEE;
  padding: 25px;
  width: 200px;
}
.dropdown-container {
  background-color: purple;
  width: 200px;
}
.dropdown {
  background-color: #CCC;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 250ms;
  visibility: hidden;
}
@keyframes delay-pointer-events {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
.dropdown-container:hover .dropdown {
  animation: delay-pointer-events 500ms linear;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms;
  transition-delay: 250ms;
  z-index: 10000;
}
.overlaid {
  background-color: #ECD;
}