Bootstrap 4 выпадающее меню при наведении курсора

Question

я использую bootstrap 4, и у меня есть выпадающее меню в моей панели навигации. Мне нужно сделать это при наведении курсора на slideDown с функцией jquery.

  if ($(window).width() > 769) {
    $('#nav-menu #dropdown1').hover(function(){
      $(this).dropdown('toggle');
    });
  }

  $('#nav-menu .dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  });
  $('#nav-menu .dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
  });

Это мой код. Когда моя мышь покидает dropdown1, она закрывается.

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Услуги
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdown1">
            <a class="dropdown-item" href="#">Услуги</a>
            <a class="dropdown-item" href="#">Услуги</a>
 
          </div>
        </li>