<div class="demo-content" id="content">
  <nav class="navigation">
    <ul class="cf">
      <li><a href="#">Home</a></li>
      <li class="has-submenu">
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">App Development</a></li>
          <li><a href="#">Icon Design</a></li>
          <li><a href="#">Illustration</a></li>
          <li><a href="#">Typography</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <div class="inner-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa labore, nesciunt tenetur. Iure quae quisquam a architecto facilis, expedita voluptas impedit repellat et eum hic, itaque, ut quas neque tempore?</p>
    <figure>
      <img src="http://placehold.it/450x300" alt="" />
    </figure>
  </div>
</div>
body {
  background-color: #F5F7FA;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.navigation {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  padding: 10px 20px;
  background-color: #fff;
}
.navigation ul {
  list-style: none;
  padding: 0; 
}
.navigation a {
  text-decoration: none;
  color: #434A54;
  font-weight: 500;
}
.navigation .has-submenu {
  position: relative;
}
.navigation .has-submenu ul li {
  opacity: 0;
}
.navigation .has-submenu > a:after {
  content: "\f123";
  font-family: "Ionicons";
  margin-left: 4px;
  color: #CCD1D9;
}
.navigation ul ul {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #AAB2BD;
  width: 150px;
  overflow: hidden;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.1);
  margin-top: 10px;
}
.navigation .has-submenu ul li a {
  padding: 8px 12px;
  display: block;
} 
.navigation .has-submenu ul li a:hover {
  background-color: #fafafa;
}
.navigation > ul > li {
  float: left;
  display: inline-block;
  margin-right: 15px;
}
.inner-content {
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #6c6f73;
}
.inner-content figure {
  margin-left: 0;
  margin-right: 0;
  margin-top: 20px;
}
.inner-content img {
  border: 5px solid #fff;
}
var $menu = $('.has-submenu');

$menu.on('click', function() {
  var $subMenu = $(this).children('ul');
  var $subMenuItem = $subMenu.children('li');
  if ( ! $subMenu.hasClass('on-view') ) {
    $subMenu.addClass('on-view');
    $subMenu.velocity('transition.slideDownIn', {
      duration: 200
    });
    $subMenuItem.velocity('transition.expandIn', {
      delay: 200,
      duration: 300,
      stagger: 100,
    }); 
  } else {
    $subMenu.removeClass('on-view');
    $subMenu.add($subMenuItem).velocity('reverse');
  }
});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,500
  2. https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js