Dropdown submenu on hover in Bootstrap 4.1 - html

Question

I am working on a website in which I want to create a dropdown submenu on hover in Bootstrap 4.1
The HTML code which I have used in order to create a dropdown menu on hover are:
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<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">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">P</a>
<a class="dropdown-item" href="#">Q</a>
<a class="dropdown-item" href="#">R</a>
<a class="dropdown-item" href="#">S</a>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>
The above HTML code is the working code which displays P, Q, R, and S on hover.
Problem Statement:
I am wondering what changes I should make in the code above now so that on hover of S; dropdown items T, U, V, and W are shown.

Answer 1

You could just apply the inception concept and put back another dropdown-toggle element inside the menu.
To open the sub-menu on hover you have to wrap the content inside a container to apply the :hover css styling display:block on the .dropdown-menu child element that contains the submenu links.
/* makes main-menu open on hover */
.menu-item:hover > .dropdown-menu {
display: block;
}
/* makes sub-menu S open on hover */
.submenu-item:hover > .dropdown-menu {
display: block;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="menu-item nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">P</a>
<a class="dropdown-item" href="#">Q</a>
<a class="dropdown-item" href="#">R</a>
<div class="submenu-item">
<a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
S
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
<a class="dropdown-item" href="#">T</a>
<a class="dropdown-item" href="#">U</a>
<a class="dropdown-item" href="#">V</a>
<a class="dropdown-item" href="#">W</a>
</div>
</div>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>

Answer 2

Well, I think you've already figured out that isn't possible with the default bootstrap 4.1 classes.
You can achieve the desired effect using some jQuery and CSS.
First, create a div with a custom class and a list with the items you need, TUVW in your case.
After in CSS, you can hide your list container and handle its position.
In jQuery you can track mouse hover event('mouseenter mouseleave') puting your logic to show/hide the list container.