Bootstrap5のドロップダウンをマウスオーバーで表示する

検索しても良いのが見つからなかったので

html部分
bootstrap.bundle.min.jsを読み込む
色々端折ったので足りないかも

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<div id="mov-out">
<a id="mov-click" class="nav-link" href="#" data-bs-toggle="dropdown" aria-expanded="false">開く</a>
<div class="dropdown-menu">
表示
</div>
</div>

css部分
これは無くても問題ないので必要に応じて

.nav-link:focus-visible {
  box-shadow: unset;
}

js部分
bootstrap.Dropdownのオブジェクトでshow,hideする

window.addEventListener("load", function() {
	const mov = document.getElementById('mov-click');
	const dropdown = new bootstrap.Dropdown(mov);
	mov.addEventListener('mouseover', function() {
		dropdown.show();
	});
	document.getElementById('mov-out').addEventListener('mouseleave', function() {
		dropdown.hide();
	});
});

jQueryで書くと

$(function(){
	const dropdown = new bootstrap.Dropdown($('#mov-click'));
	$('#mov-click').mouseover(function() {
		dropdown.show();
	});
	$('#mov-out').mouseout(function() {
		dropdown.hide();
	});
});