Помогите доработать JQUERY меню

$("nav > ul > li").click(function(event) { 
  let ul = $(this).find("ul"); 
  if (ul.length && ul.is(':hover')) { 
    return false; 
  } 
  ul.slideToggle(); 
  $("ul ul").not(ul).slideUp(); 
  event.stopPropagation(); 
}); 
 
$(document).on("click", function() { 
  $("nav ul ul").slideUp(); 
});

ul ul { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav> 
  <div class=""> 
    <i class="fas fa-bars"></i> 
  </div> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Drop 1 <i class="fas fa-sort-down"></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="#">Drop 2 <i class="fas fa-sort-down"></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>