CSS Only Dropdown

Dropdown

If you are new to html you'll see <div />'s and <a />'s everywhere. Div is short for division and a is short for anchor (basically a link)

Dropdown

<div class="parent">
  <a href="#dropdown">Dropdown</a>
  <div class="menu">
    <a href="#link1">Link 1</a>
    <a href="#link2">Link 2</a>
    <a href="#link3">Link 3</a>
  </div>
</div>

.menu {
  position: absolute;
  top: 100%;
  transition: scale 0.5s, opacity 0.5s;
  transform-origin: top;
  opacity: 0;
  scale: 0;
}

.parent:hover .menu {
  opacity: 1;
  scale: 1;
}