Responsive Menu Hover Effect:

1. Call jquery library ->

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async'></script>

2. SCSS ->

   @import url("https://fonts.googleapis.com/css?family=Anton|Josefin+Sans");
   ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
     background-color: white;
     border-top: 1px solid #000;
   }
   
   ::-webkit-scrollbar-thumb {
     background-color: #1a1a1a;
     height: 5px;
   }
   
   * {
     box-sizing: border-box;
   }
   
   /html, body {
     width: 100%;
     min-height: 100%;
     margin: 0;
     padding: 0;
     background: #000;
   }
   
   .page {
     width: 720px;
     float: left;
     position: relative;
     left: 50%;
     margin-left: -360px;
     padding: 10px;
   }
   .page h1, .page p {
     float: left;
     width: 100%;
     color: #fff;
     font-family: 'Josefin Sans', sans-serif;
   }
   .page h1 {
     text-transform: uppercase;
     margin-top: 115px;
     text-align: center;
     letter-spacing: 10px;
   }
   .page p {
     line-height: 20pt;
     font-size: 14pt;
     font-weight: 100;
     text-align: justify;
   }/
   
   .menu {
     opacity: 0;
     pointer-events: none;
     background: #fff;
     width: 80%;
     float: left;
     height: 100%;
     position: fixed;
     z-index: 1000;
     top: 0;
     right: 0;
     border-left: 15px solid #333;
     transition: all 1s ease;
     -webkit-transition: all 1s ease;
   }
   .menu.open {
     opacity: 1;
     pointer-events: all;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
   }
   
   ul {
     float: right;
     list-style: none;
     position: fixed;
     color: #000;
     right: 70px;
     font-size: 40pt;
     top: 50%;
     margin-top: -190px;
     font-family: 'Josefin Sans', sans-serif;
     text-transform: uppercase;
   }
   ul li {
     float: left;
     clear: both;
     width: 100%;
     margin: 20px 0px 20px 0px;
     text-align: right;
     position: relative;
     letter-spacing: 20px;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
     cursor: pointer;
   }
   ul li:hover {
     letter-spacing: 2px;
     padding-right: 20px;
     color: #31f4d6;
   }
   ul li:hover:after {
     border: 8px solid #f431d6;
   }
   ul li:hover:before {
     opacity: 1;
     -webkit-animation: hoverRotate .5s;
     /* Safari 4.0 - 8.0 */
     -webkit-animation-delay: .1s;
     -webkit-transform: rotate(45deg) translate(0px, 0px);
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
   }
   ul li:after {
     content: '';
     float: left;
     position: absolute;
     width: 40px;
     border-radius: 500px;
     height: 40px;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
     border: 8px solid #000;
     right: -50px;
     z-index: -1;
     top: -7px;
   }
   ul li:before {
     content: '';
     float: left;
     position: absolute;
     width: 70px;
     height: 10px;
     background: #f4e931;
     right: -57px;
     top: 17px;
     -webkit-transform: rotate(-45deg) translate(-60px, 0px);
     opacity: 0;
     z-index: 10000;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
     -webkit-transition-delay: .1s;
     transition-delay: .1s;
   }
   
   .burger {
     width: 50px;
     float: left;
     position: fixed;
     right: 30px;
     z-index: 10000;
     top: 20px;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
     cursor: pointer;
   }
   .burger span {
     width: 100%;
     float: left;
     height: 7px;
     background: #fff;
     margin-top: 10px;
     transition: all 0.2s ease;
     -webkit-transition: all 0.2s ease;
   }
   .burger:hover span {
     background: #31f4d6 !important;
   }
   .burger.open span {
     background: #000;
   }
   .burger.open span:nth-child(1) {
     -webkit-transform: rotate(45deg) translate(10px, 10px);
   }
   .burger.open span:nth-child(2) {
     -webkit-transform: rotate(-45deg) translate(0px, -5px);
   }
   .burger.open span:nth-child(3) {
     opacity: 0;
   }
   
   @-webkit-keyframes hoverRotate {
     0% {
       -webkit-transform: rotate(-45deg) translate(-60px, 0px);
     }
     50% {
       -webkit-transform: rotate(-45deg) translate(0px, 0px);
     }
     100% {
       -webkit-transform: rotate(45deg) translate(0px, 0px);
     }
   }
   @media screen and (max-width: 750px) {
     .page {
       width: 100%;
       left: 0%;
       padding: 20px;
       margin-left: -0px;
     }
   
     .menu {
       width: 100%;
       border: 0;
     }
   
     ul {
       right: 10px;
     }
     ul li {
       font-size: 18pt;
     }
     ul li:after {
       width: 100%;
       border-radius: 0px;
       height: 3px;
       position: absolute;
       background: #f4e931;
       border: 0px;
       top: 40%;
     }
     ul li:before {
       display: none;
     }
     ul li:hover:after {
       border: 0px;
       opacity: 0;
     }
   }

3. Js: ->

   $('.burger').click(function(){
     $(this).toggleClass('open');
     $('.menu').toggleClass('open');
   });

4. Html Example ->
   
5. Result ->