<div class="container">

  <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  
  
</div>
.container {margin:2em;}
$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  
  // There is a little gap below the button so if you didn't have the timeout function delay it would remove the open class before you actually stop hovering the component. 
  
  //sets timer variable
  var timer;
  
  // when the button and button menu are hovered
  $('.dropdown button, .dropdown-menu').hover(function() {
    
    // Clears the time on hover to prevent a que or waiting for the delay to finish from a previous hover event
    clearTimeout(timer);
    // Add the class .open and show the menu
    $('.dropdown').addClass('open');
    
  }, function() {
    
    // Sets the timer variable to run the timeout delay
    timer = setTimeout(function() {
      // remove the class .open and hide the submenu
      $('.dropdown').removeClass("open");
    }, 500);
    
  });

  // document ready  
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js