How can I create a vertical navigation with sub-menu/widgets using Bootstrap 4.2.1?
Here is the requirement:
https://i.sstatic.net/JaiLV.jpg
My attempt so far: The menu only works onclick, not on mouse over (sub menu still shows when mouse moves out).
HTML:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-hero">
<i class="fa fa-circle" aria-hidden="true"></i>MyIB
</a>
</li>
<li class="nav-item dropdown-submenu">
<a class="nav-link" href="#page-hero" data-toggle="collapse" data-target="#submenu1">
<i class="fa fa-circle" aria-hidden="true"></i>Store
<i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
<div class="menu-items " >
<div class="menu-point">
<div class="menu-wrapper collapse" id="submenu1">
<h3>Title goes here</h3>
<div class="nested-menu">
<div class="sub-menu" >
<a class="dropdown-item" href="#">French</a>
<a class="dropdown-item" href="#">German</a>
<a class="dropdown-item" href="#">Doutch</a>
</div>
<div class="sub-menu" >
<a class="dropdown-item" href="#">French</a>
<a class="dropdown-item" href="#">German</a>
<a class="dropdown-item" href="#">Doutch</a>
</div>
<div class="sub-menu" >
<a class="dropdown-item" href="#">French</a>
<a class="dropdown-item" href="#">German</a>
<a class="dropdown-item" href="#">Doutch</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>