<img id="menu-icon" src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30" width="30" />
<ul id="collapse-menu">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
#collapse-menu {
  transition: transform 0.3s;
  transform-origin: top;
  transition-delay: 0.2s;
  &:not(:hover) {
    transform: scaleY(0);
  }
}

#menu-icon:hover ~ #collapse-menu {
  transform: scaleY(1);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.