Ndtyjky

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.