SOURCE

$('nav li').hover(
  function() {
	  $('ul', this).stop().slideDown(200);
  },
	function() {
    $('ul', this).stop().slideUp(200);
  }
);

<nav>
  <div class="container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Categories<i class='fa fa-angle-down'></i></a>
        <ul>
          <li><a href="#">Category One</a></li>
          <li><a href="#">Category Two</a></li>
          <li><a href="#">Category Three</a></li>
        </ul>
      </li>
      <li class='sub-menu'>
        <a href="#">Services<i class='fa fa-angle-down'></i></a>
        <ul>
          <li><a href="#">Service One</a></li>
          <li><a href="#">Service Two</a></li>
          <li><a href="#">Service Three</a></li>
          <li><a href="#">Service Four</a></li>
          <li><a href="#">Service Five</a></li>
          <li><a href="#">Service Six</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);

/* Default Styles */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body {
  background: #fafafa;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  margin: 0;
}
a {text-decoration: none;}
.container {
  width: 1000px;
  margin: auto;
}

/* Navigation Styles */
nav {background: #2ba0db;}
nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
}
nav ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 14px;
  transition: 0.3s linear;
}
nav ul li:hover {background: #126d9b;}
nav ul li ul {
  border-bottom: 5px solid #2ba0db;
  display: none;
  position: absolute;
  width: 250px;
}
nav ul li ul li {
  border-top: 1px solid #444;
  display: block;
}
nav ul li ul li:first-child {border-top: none;}
nav ul li ul li a {
  background: #373737;
  display: block;
  padding: 10px 14px;
}
nav ul li ul li a:hover {background: #126d9b;}
nav .fa.fa-angle-down {margin-left: 6px;}