Выпадающее меню на jquery

<style>
ul.menu{
dispaly: flex;
}
ul.menu > li.menu-item{

}
div.menu > li.menu-item > div.submenu{
display: none;
position: absolute;
}
div.menu > li.menu-item > div.submenu > li{
display: block;
}
.show{
dispaly: block;
}
</style>

<script>
jQuery(function($){
  $('.menu-item').mouseover(function(){
    $('div.submenu').removeClass('show');
    $(this).find('div.submenu').addClass('show');
  })
  $('.menu-item').mouseout(function(){
    $('div.submenu').removeClass('show');
    $(this).find('div.submenu').addClass('show');
  })
  
  $(document).on('mouseout', 'div.submenu.show', ()=>{
   $('div.submenu').removeClass('show');
  })
})
</script>