Bootstrap 4.5.0 MultiLevel menu. How to do? - css

Question

I am new to Bootstrap. Using latest version 4.5.0, I want to create a multilevel menu, with three levels. There are various instances of these in Bootstrap 4.4.1 however the model for navbar and dropdowns has changed in 4.5.0.
There is an explanation of Navbar in the official documentation and this demonstrates a two level menu. I can't seem to find an example of how to extend this to three levels or understand how this can be constructed. I tried the following which is a simple extension of the two levels to three but it doesn't work. It fails when clicking on the link to the third level labelled 2 Dropdown link.
The original navbar documentation uses a click based approach to viewing the menu. It would also be advantageous to see how a 4.5.0 menu can be made to work on hover.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">2 Action</a>
<a class="dropdown-item" href="#">2 Another action</a>
<div class="dropdown-item">
<a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2 Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<a class="dropdown-item" href="#">3 Action</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
Any suggestions as to correct code, enabling documentation or functioning examples welcome.