Odtnhj

I have a multilevel dropdown menu created in Bootstrap 4. I want to display the dropdown submenu on the right side of the parent dropdown. I have aligned the menu to the right but that's not what I want. How to display the dropdown submenu on the right side instead of right aligned ?

<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>

Here, the submenu of Automobile Engineering is
-HOD's Desk
-About Us
-Faculty....
I want this submenu to be displayed on right side of the parent submenu which contains automobile engineering.

I have used dropdown-menu-right bootstrap class but that aligns the menu to the right and doesn't display it outside the parent menu.

Thanks.

Add left to the dropdown menu whose position you want to change. like shown below

.dropdown-menu.show.abc 
 left: 95%;

.dropdown-menu.show.abc 
 left: 95%;
 top: 20px;

<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 abc" 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>

 .navbar-expand-md .navbar-nav .dropdown-menu 
 position: absolute;
 top: -7px;
 right: auto;
 left: 100%;
 

I think this is what you are looking for https://codepen.io/svnt/pen/beEgre

HTML:

<div class="container">
 <div class="row">
 <h2>Multi level dropdown menu in Bootstrap</h2>
 <hr>
 <div class="dropdown">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
 </button>
 <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
 <li class="dropdown-item"><a href="#">Some action</a></li>
 <li class="dropdown-item"><a href="#">Some other action</a></li>
 <li class="dropdown-divider"></li>
 <li class="dropdown-submenu">
 <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
 <ul class="dropdown-menu">
 <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
 <li class="dropdown-submenu">
 <a class="dropdown-item" href="#">Even More..</a>
 <ul class="dropdown-menu">
 <li class="dropdown-item"><a href="#">3rd level</a></li>
 <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
 <ul class="dropdown-menu">
 <li class="dropdown-item"><a href="#">4th level</a></li>
 <li class="dropdown-item"><a href="#">4th level</a></li>
 <li class="dropdown-item"><a href="#">4th level</a></li>
 </ul>
 </li>
 <li class="dropdown-item"><a href="#">3rd level</a></li>
 </ul>
 </li>
 <li class="dropdown-item"><a href="#">Second level</a></li>
 <li class="dropdown-item"><a href="#">Second level</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
</div>

CSS:

.dropdown-submenu 
 position: relative;


.dropdown-submenu>.dropdown-menu 
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;


.dropdown-submenu:hover>.dropdown-menu 
 display: block;


.dropdown-submenu>a:after 
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;


.dropdown-submenu:hover>a:after 
 border-left-color: #fff;


.dropdown-submenu.pull-left 
 float: none;


.dropdown-submenu.pull-left>.dropdown-menu 
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;

Note: the codes are not mine.