* {
  transition:.25s ease-in-out;
}

body {
  background:#b6cdd9;
  font-family:helvetica neue,helvetica,arial,sans-serif;
  font-weight:200;
  font-size:16px;
}

h1 {
  font-size:25px;
  text-align:center;
  padding-top:50px;
}

#menu {
  width:350px;
  margin:50px auto;
  > ul {
    position:relative;
    transform-origin:left center;
    transform-style:preserve-3d;
    &:hover {
      transform:perspective(1000px) rotateY(-70deg);
    }
    > li {
      display:block;
      padding:20px;
      background:white;
      > ul {
        position:absolute;
        z-index:0;
        left:100%;
        top:0;
        bottom:0;
        overflow:scroll;
        width:100%;
        background:#008fde;
        transform-origin:left center;
        transform-style:preserve-3d;
        transform:perspective(1000px) rotateY(90deg) scaleX(.8);
        > li {
          padding:20px;
          &:hover {
            background:#40bbff;
          }
        }
      }
      &:hover {
        background:#00a4ff;
        > ul {
          z-index:5000;
        }
      }
    }
  }
}