CSSだけでつくる、アニメーションをするナビゲーションメニューバー 　#1

 <div class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Privacy</a></li>
        <li><a href="">Menus</a></li>
    </ul>
  </div>

  .nav{
      position: relative;
      width: 900px;
      margin: 20px auto;
  }
  .nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
  }
  .nav ul li{
      position: relative;
      float: left;
      transform: skewX(-20deg);
      background: rgb(191, 185, 246);
      padding: 20px 0;
      box-shadow: -2px 0 20px -6px rgba(0, 0, 0, 0.5);
      z-index: 1;
      width: 120px;
      margin-left: -100px;
      transition: all 0.5s;
  }
  .nav ul li a{
      display: block;
      padding: 20px;
      font-size: 16px;
      transform: skewX(20deg);
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      text-transform: uppercase;
  }
  .nav ul li:first-child{
      margin-left: 0;
  }
  .nav ul li:hover{
      background: #6d63c8;
      transform: translate(2px,-10px) skewX(-20deg);
      z-index: 10;
      width: 160px;
  }
  .nav ul li:hover a{
      font-size: 1.5em;
  }
  .nav ul li:last-child{
      background:rgb(73, 2, 155);
  }
  .nav ul li:last-child a{
      color: #fff;
  } 
  .nav ul:hover li{
      margin-left: 0;
  }