<ul class="menu cleafix">
  <li class="parent">
    <a href="">Parent</a>
    <ul class="children">
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
    </ul>
  </li>
  <li class="parent">
    <a href="">Parent</a>
    <ul class="children">
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
    </ul>
  </li>
  <li><a href="">Link</a></li>
  <li class="parent">
    <a href="">Parent</a>
    <ul class="children">
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
      <li><a href="">Item</a></li>
    </ul>
  </li>
  <li><a href="">Link</a></li>
</ul>
.menu {
  display: inline-block;
  margin: 0 auto;
  margin-top: 100px;
  list-style-type: none;

	a {
		display: block;
		margin: 0;
		padding: 16px 25px;
		color: #333;
     text-decoration: none;
     background-color: #fff;
	}
	li {
		position: relative;
		float: left;
		margin: 0;
		border-left: 1px solid #eee;
		perspective: 200;

		&:first-child {
			border-left: none;
		}
		&.parent {
			&:before {
				content: '';
				z-index: 200;
				position: absolute;
				top: 100%;
				left: 50%;
				margin-top: -4px;
				margin-left: -20px;
				display: block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 8px 20px 0 20px;
				border-color: #fff transparent transparent transparent;
				transition: margin-top .1s ease-out;
			}
		}
		&:hover,
		&:focus {
			& > a {
				text-decoration: none;
				color: #fff;
				background-color: #333;
			}
			&:before {
				margin-top: 0;
				border-top-color: #333;
			}
			.children {
				opacity: 1;
				transform: rotateX(0) translateZ(0);
			}
		}
	}
	.children {
		opacity: 0;
		backface-visibility: hidden;
		transform: rotateX(-90deg);
		transform-style: preserve-3d;
		transform-origin: top center;
		transition: transform .4s cubic-bezier(.17,.67,.59,1.21), opacity .1s .1s;

		z-index: 100;
     list-style-type: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 200px;
		margin: 0;
		padding: 10px 0;
		background-color: #fff;
		box-shadow: 0 2px 3px 0 rgba(0,0,0,0.1);
     text-align: left;

		li {
			float: none;
		}
		a {
			background-color: transparent;

			&:hover,
			&:focus {
				color: #333;
				background-color: #f9f9f9;
			}
		}
	}
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
body {
  background-color: #584E4A;
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js