<nav class="menu">
  <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Big Widgets</a></li>
        <li class="menu-item"><a href="#0">Bigger Widgets</a></li>
        <li class="menu-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item">
      <a href="#0">Kabobs</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Shishkabobs</a></li>
        <li class="menu-item"><a href="#0">BBQ kabobs</a></li>
        <li class="menu-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
  </ol>
</nav>

body{
  display:flex;
  justify-content:center;
  height:100vh;
  padding:0px;
  margin:0px;
  overflow:hidden;
  font-family:'Nanum Gothic', sans-serif;
  perspective:700px;
  background:#333;
  *{
    box-sizing:border-box;
    transform-style:preserve-3d;
  }
  @media (min-width:666px){
  nav{
    width:100%;
    position:absolute;
    background:#222;
    margin:0px;
    max-width:100%;
    z-index:2;
    ol{
      width:100%;
      display:flex;
      justify-content:space-around;
      padding:0px;
      margin:0px;
      transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      li{
        display:inline-block;
        padding:30px;
        flex-grow:1;
        text-align:center;
        position:relative;
        transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &:nth-of-type(4){
              ol{
                &:after{
                  content:"\f06d";
                  font-family:FontAwesome;
                }
              }
            }
        &:hover{
          ol{
            
          &:before{
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  bottom:-30px;
                  left:-15px;
                  transform:rotate(45deg) scale(0.5);
                  border:3px solid orange;
                  border-color:orange transparent transparent orange;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, orange 45%, orange 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;
                  
                  animation:clipin 0.4s ease-in 1 forwards;
                  animation-delay:0.2s;
                  -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                  clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
          }
          }
          li{
            position:relative;
            &:first-of-type{
              &:before{
                display:none;
              }
            }
                &:before{
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  right:-30px;
                  top:-15px;
                  left:auto;
                  transform:rotate(-45deg) scale(0.5);
                  border:3px solid red;
                  border-color:red transparent transparent red;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;
                  
                  animation:clipin 0.4s ease-in 1 forwards;
                  -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                  @keyframes clipin{
                    0%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    50%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    75%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
clip-path: polygon(35% 35%, 35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
                    }
                    100%{
                      -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
                    }
                  }
                }
          }
        }
        ol{
          &:after{
            content:"\f25b";
            font-family:FontAwesome;
            vertical-align:center;
            font-size:150px;
            color:#ff8000;
            position:absolute;
            padding-top:40px;
            height:calc(100% - 40px);
            width:100%;
            left:-100%;
            top:0;
            background:orange;
            transform:rotate(-90deg);
            transform-origin:0% 0%;
            transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          }
        }
        @for $i from 1 through 10{
          &:nth-of-type(#{$i}){
            &:hover{
              a{
                color:#222;
              }
              ol{
                li{
                  a{
                    color:#fff;
                  }
                }
              }
              &:before{
                transform:translateY(0) rotate(0deg);
              }
            }
            &:before{
              content:'';
              position:absolute;
              width:100%;
              height:100%;
              background:adjust-hue(red, ($i * 10));
              top:0;
              left:0;
              z-index:-1;
              transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transform:translateY(-125%) rotate(-5deg);
            }
          }
        }
        &:hover{
          ol{
            transform:translateY(0) translateZ(-1px);
            &:after{
              transform:rotate(0deg);
            }
            li{
              &:nth-of-type(1n){
                transform:none;
                margin:0px;
                &:hover{
                  &:after{
                    opacity:1;
                    top:0vh;
                  }
                }
              }
            }
          }
        }
        a{
          color:#fff;
          text-decoration:none;
          text-transform:uppercase;
          letter-spacing:2px;
          font-weight:900;
        }
        ol{
          display:block;
          position:absolute;
          top:100%;
          transform:translateY(-110%) translateZ(-5px);
          transform-origin:top right;
          z-index:-1;
          width:120%;
          left:0;
          &:hover{
            li{
              &:nth-of-type(1n){
                &:hover{
                  padding:40px 30px;
                }
              }
            }
          }
          li{
            display:block;
            margin:20px 0;
            a{
              font-size:14px;
            }
            &:before{
              display:none;
            }
            @for $i from 1 through 10{
              &:nth-of-type(#{$i}){
                transition-delay:#{$i/10}s;       background:adjust-hue(red, ($i * 10));
                &:before{
                  animation-delay:#{$i/20}s;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, adjust-hue(red, ($i * 10)) 45%, adjust-hue(red, ($i * 10)) 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;
                  border-color:adjust-hue(red, ($i * 10)) transparent transparent adjust-hue(red, ($i * 10));
                }
                
              }
            }
            &:first-of-type{
              margin-top:0;
            }
            &:nth-of-type(even){
              transform-origin:top left;
              transform:rotate(5deg);
            }
            &:nth-of-type(odd){
              transform-origin:top right;
              transform:rotate(-5deg);
            }
          }
        }
      }
    }
  }
  }
  @media (max-width:666px){
    nav{
      position:absolute;
      top:0;
      height:45px;
      left:0;
      background:#222;
      width:100%;
      &:hover{
        ol{
          li{
            &:nth-of-type(1n){
              transform:rotate(0deg);
              margin:0px;
              transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            @for $i from 1 through 10{
              &:nth-of-type(#{$i}){
                transition-delay:#{$i/15}s;
                &:hover{
                  a{
                    color:adjust-hue(red, ($i * 10));
                  }
                }
              }
            }
          }
        }
        &:before{
          transform:rotate(45deg);
          box-shadow:0 0 0 0;
        }
        &:after{
          transform:rotate(-45deg);
        }
      }
      &:before, &:after{
        content:'';
        position:absolute;
        width:30px;
        height:3px;
        background:#fff;
        top:10px;
        left:calc(50% - 15px);
        border-radius:5px;
        box-shadow:0 10px 0 0 #fff;
        transition:transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 100ms ease-in-out;
        transition-delay:0.1s, 0s;
        transform-origin:0% 50%;
      }
      &:after{
        box-shadow:none;
        top:30px;
        transform-origin:0% 50%;
      }
      &:hover{
        ol{
          transform:translateY(0) translateZ(-1px);
          ol{
            transform:none;
          }
        }
      }
      ol{
        position:absolute;
        width:100%;
        top:0px;
        display:table;
        left:0;
        margin:0px;
        transform:translateY(calc(-100% - 45px)) translateZ(-1px);
        text-align:center;
        transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background:#000;
        padding:60px 0 20px;
        height:auto;
        li{
          position:relative;
          display:inline-block;
          width:100%;
          clear:both;
          height:50px;
          padding:10px 0;
          margin:10px 0;
          transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          background:#000;
          &:nth-of-type(even){
            transform:rotate(-5deg);
          }
          &:nth-of-type(odd){
            transform:rotate(5deg);
          }
          &:hover{
            ol{
              height:auto;
              transition:opacity 0.2s ease-in-out;
              opacity:1;
            }
          }
          a{
            color:#fff;
            text-decoration:none;
          }
        }
        ol{
          position:relative;
          transform:none;
          background:transparent;
          display:inline-block;
          width:100%;
          height:auto;
          top:auto;
          padding:0;
          height:0;
          overflow:hidden;
          opacity:0;
          transition:opacity 0.2s ease-in-out;
          li{
            font-size:12px;
            height:auto;
            &:first-of-type{
              padding-top:20px;
            }
          }
        }
      }
    }
  }
  
}