bootstrap4のnav-barで親リンクを押せてかつマウスオーバーしたい

Question

こちらを参考にして、親リンクのクリックまでは実現できましたが、マウスオーバーはうまくいきませんでした。
https://webnetamemo.com/coding/bootstrap/201607153139
極力jsを追記しない手段はないものでしょうか…
よろしくお願い申し上げます。

	<nav class="navbar navbar-header navbar-expand-lg">
		<div class="collapse navbar-collapse " id="navmenu">
			<ul class="navbar-nav w-100 mr-auto">
				<li class="nav-item navbar-custom w-100">
					<a class="nav-link" href="info.html" style="color: #fff;">親メニュー1<br /><span class="sr-only" style="boader-left:1px solid #fff !important;">(current)</span></a>
				</li>
				<li class="nav-item navbar-custom dropdown w-100">
					<a class="nav-link dropdown-toggle" href="overview.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #fff;"><span class="parentmenu">親メニュー2</span><b class="caret"></b></a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="overview.html#tek">子メニュー2-1</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="overview.html#ark">子メニュー2-2</a>
					</div>
				</li>
				<li class="nav-item navbar-custom w-100">
					<a class="nav-link" href="tekinfo.html" style="color: #fff;"親メニュー3<br /><span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item navbar-custom w-100">
					<a class="nav-link" href="arkinfo.html" style="color: #fff;">親メニュー4<br /><span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item navbar-custom w-100">
					<a class="nav-link" href="bookinfo.html" style="color: #fff;">親メニュー5<span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item navbar-custom dropdown w-100">
					<a class="nav-link dropdown-toggle" href="about.html" id="navDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #fff;"><span class="parentmenu">親メニュー6</span></a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="about.html#effect">子メニュー6-1</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#lineup">子メニュー6-2</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#organization">子メニュー6-3</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#member">子メニュー6-4</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#access">子メニュー6-5</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#info">子メニュー6-6</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#Document">子メニュー6-7</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="about.html#ask">子メニュー6-8</a>
					</div>
				</li>
			</ul>
		</div>
	</nav>

.navbar {
	background-color: #2E3091 !important;
	text-align: center;
	width: 100%;
	font-size: 0.9rem;
	padding: 0;
}

.navbar-custom {
	border-right: 1px solid #fff;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
	display: block;
}

ul li:nth-child(-n + 6) {
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}


.nav-link {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-right: -15px;
	padding-left: -15px;
}

.nav-item a:link {
	color: #000;
}

.nav-item a:hover {
	color: #ff9600 !important;
}

.nav-item .dropdown-item a:link {
	color: #000000;
}

.nav-item .dropdown-item a:visited {
	color: #000000;
}

Answer 1

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
「ホバーエフェクトによるドロップダウン表示」のjsを追記することで実現できました。