I am working with a Bootstrap 4 multilevel dropdown menu and I am trying to figure out how to display the submenu on the right side of the parent dropdown, rather than just aligning it to the right. Any suggestions on how to achieve this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-custom navbar-expand-md bg-dark navbar-dark">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_target">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" data-target="#dropdown_target" href="#">
DEPARTMENTS
</a>
<ul class="dropdown-menu" aria-labelledby="dropdown_target">
<li class="dropdown-item dropdown">
<a data-toggle="dropdown" data-target="#auto_en" href="#">Automobile Engineering</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="auto_en">
<li class="dropdown-item"><a href="#">HOD's Desk</a>
</li>
<li class="dropdown-item"><a href="#">About Us</a></li>
<li class="dropdown-item"><a href="#">Faculty</a></li>
<li class="dropdown-item"><a href="#">Events</a></li>
<li class="dropdown-item"><a href="#">Class
Timetable</a></li>
<li class="dropdown-item"><a href="#">Results</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>In the specific case of the Automobile Engineering submenu: -HOD's Desk -About Us -Faculty.... I would like these items to appear on the right side of the parent menu instead of inside it.
I have tried using the "dropdown-menu-right" Bootstrap class, but this only aligns the menu to the right without moving it outside the parent menu.
Any help is appreciated!