DROPDOWN ON HOVER
Run 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
	
</head>
<body>
    <h2> Hover to open the dropdown </h2>
    <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>
	<script>
      $(document).ready(function() {
		  var timer;
		  $('.dropdown button, .dropdown-menu').hover(function() {
			
			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);
			
		  });
    });
    </script>
</body>
</html>