如何在选定的导航项下方对齐引导下拉菜单

Question

我试图让“Big Dropdown”菜单显示在导航项的正下方。我已经为菜单设置了最大宽度，但我似乎无法让它正确对齐。我更喜欢一个全响应的解决方案和“最干净”的方式来实现这一点，而不必调整所有的小事情。

绿色框是我希望下拉菜单“自然”定位的位置，下拉菜单是其当前的错误位置，因此理想的解决方案是如果我要添加更多导航项并且每个下拉菜单将分别放置在他们的导航项目下。

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 - 请参阅“大下拉菜单”
https://codepen.io/GH5ST/pen/GGgWPK

Answer 1

由于您标记了您正在使用 Bootstrap 4，因此实际上有一个内置类来右对齐下拉列表，称为 dropdown-menu-right。该文档可以在 Bootstrap 4 文档的Menu alignment section 中找到。

请注意，由于您使用的是导航菜单，因此这会将下拉菜单与页面右侧对齐，而不是下拉按钮的右侧。

更新后的Codepen示例可以在here找到。

编辑：我forked the Codepen example again 并添加了一些 Javascript 和 CSS 以使下拉菜单与下拉按钮而不是屏幕右侧对齐。

Answer 2

添加此样式

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