У меня есть многоуровневое раскрывающееся меню, созданное в Bootstrap 4. Я хочу отобразить раскрывающееся подменю в правой части раскрывающегося списка родителей.Я выровнял меню вправо, но это не то, что я хочу.Как отобразить выпадающее подменю справа, а не по правому краю?
<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>
Здесь подменю автомобильной инженерии это -HOD's Desk -О нас -Факультет .... Я хочу, чтобы это подменю отображалось в правой части родительского подменю, котороесодержит автомобильную технику.
Я использовал класс начальной загрузки по выпадающему меню, но он выравнивает меню вправо и не отображает его вне родительского меню.
Спасибо.