Edit on
<nav>
  <ul>
    <li><a href="">Last</a></li>
    <li><a href="">one</a></li>
    <li><a href="">is</a></li>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
  </ul>
</nav>
nav > ul > li {
  display: inline-block
}
nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s 1s;
}
nav > ul > li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
}
nav a {
  display: block;
  
}

body {
  padding: 10px;
}
Rerun