很简单，css中加入如下代码

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
    ...
</div>

成功实现鼠标经过展开下拉菜单，但是有一个问题，主导航的链接会失效，我们可以用下面的方法解决这个问题。

用js实现：

<script>	
	$(document).ready(function(){
		//关闭click.bs.dropdown.data-api事件，使顶级菜单可点击
		$(document).off('click.bs.dropdown.data-api');
	});	 
	$(document).ready(function(){
		dropdownOpen();//调用
	});
	/**
	 * 鼠标划过就展开子菜单，免得需要点击才能展开
	 */
	function dropdownOpen() {	 
		var $dropdownLi = $('li.dropdown');	 
		$dropdownLi.mouseover(function() {
			$(this).addClass('open');
		}).mouseout(function() {
			$(this).removeClass('open');
		});
	}
	</script>

需要多写一条css

.open .dropdown-menu{display: block;}