<nav>
  <ul>
    <li><a href="">Last</a></li>
    <li><a href="">one</a></li>
    <li><a href="">is</a></li>
    <li class="parent">
      Dropdown
      <ul class="submenu">
        <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;
}
nav > ul > li ul.open {
  visibility: visible;
}
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;
}

var timer;

$(".parent").on("mouseover", function() {
  clearTimeout(timer);
	openSubmenu();
}).on("mouseleave", function() {
  timer = setTimeout(
  	closeSubmenu
  , 1000);
});

function openSubmenu() {
  $(".submenu").addClass("open");
}
function closeSubmenu() {
  $(".submenu").removeClass("open");
}