<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;
}