CSS Snippets Drop Down – Responsive

<nav>
               <div>
                     <i class="fa fa-bars"></i>
               </div>
   
               <ul class="menu-bar">
                     <li><a href="#">Home</a></li>
                     <li><a href="#">Products <i class="fa fa-sort-desc"></i></a>
                           <ul>
                                 <li><a href="#">Product 1</a></li>
                                 <li><a href="#">Product 2</a></li>
                                 <li><a href="#">Product 3</a></li>
                                 <li><a href="#">Product 4</a></li>
                           </ul>
                     </li>
                     <li><a href="#">Services <i class="fa fa-sort-desc"></i></a>
                           <ul>
                                 <li><a href="#">Product 1</a></li>
                                 <li><a href="#">Product 2</a></li>
                                 <li><a href="#">Product 3</a></li>
                                 <li><a href="#">Product 4</a></li>
                           </ul>
                     </li>
                     <li><a href="#">About</a></li>
                     <li><a href="#">FAQ</a></li>
               </ul>
         </nav>

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
     body,ul.menu-bar{margin:0;padding:0}
     html{font-family:Poppins,sans-serif}
     ul.menu-bar{list-style-type:none;background:#ffc107;position:relative}
     ul.menu-bar li:hover,ul.menu-bar ul{background:#ffd761}
     ul.menu-bar li{display:inline-block}
     ul.menu-bar li a{color:#292929;text-decoration:none;padding:15px;display:block}
     ul.menu-bar ul{position:absolute;min-width:200px;display:none;padding:0}
     ul.menu-bar ul li{display:block;background:#ffc107}
     ul.menu-bar li:hover ul{display:block}
     ul.menu-bar li i{color:#292929;float:right;padding-left:20px}
     nav div{background:#ffd761;color:#292929;font-size:24px;padding:.6em;cursor:pointer;display:none}
     @media(max-width:768px){
         ul.menu-bar,ul.menu-bar ul{position:static;background:#ffc107}
         nav div{display:block}
         ul.menu-bar{display:none}
         ul.menu-bar li{display:block}
         }
    </style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
   
         $("nav div").click(function() {
               $("ul").slideToggle();
               $("ul ul").css("display", "none");
         });
   
         $("ul li").click(function() {
               $("ul ul").slideUp();
               $(this).find('ul').slideToggle();
         });
   
         $(window).resize(function() {
               if($(window).width() > 768) {
                     $("ul").removeAttr('style');
               }
         });
   
         </script>