How to align bootstrap dropdown menus underneath selected nav item

Question

I am trying to get the "Big Dropdown" menu to display right underneath the nav item. I have set a max-width to the menu but I cannot seem to get it to align properly. I would prefer an all responsive solution & the "cleanest" way to achieve this without having to adjust all the little things.

The green box is where I would like the dropdowns to be "naturally" positioned at, the dropdown being its current WRONG position, so the ideal solution would be if I were to add more nav items and each dropdown would be placed respectively under their nav items.

HTML

<li class="nav-item dropdown position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" 
    id="navbarDropdown" role="button">Big Dropdown</a>
    <ul class="dropdown-menu megamenu midmenu ">
        <div class="row">
            <li class="col-md-6">
                <ul>
                    <h6 class="list-header">List Header</h6>
                    <hr>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                </ul>
            </li>
            <li class="col-md-6">
                <ul>
                    <h6 class="list-header">List Header</h6>
                    <hr>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                </ul>
           </li>
        </div>
    </ul>
</li>

CSS

nav.main .megamenu {
    padding: 20px 20px;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

nav.main .midmenu {
    position: absolute;
    padding: 20px 20px;
    float: left;
    top: auto;
    left: auto;
    right: auto;
    max-width: 650px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Codepen - Please See "Big Dropdown"
https://codepen.io/GH5ST/pen/GGgWPK

Answer 1

Since you tagged that you're using Bootstrap 4, there is actually a built-in class to right align dropdowns called dropdown-menu-right. The documentation can be found in the Menu alignment section of the Bootstrap 4 documentation.

Note that since you are using a nav-menu, this will align the dropdown to the right of the page and not the right of the dropdown button.

The updated is the updated Codepen example can be found here.

Edit: I forked the Codepen example again and added a bit of Javascript and CSS in to right align the dropdown menu with the dropdown button instead of the right side of the screen.

Answer 2

Add this style

.dropdown-menu.megamenu.midmenu.show {
    right: 0;
  }
  .dropdown-menu.show {
    right: 0;
  }