Как выровнять выпадающее меню начальной загрузки под выбранным навигационным элементом

Question

Я пытаюсь, чтобы меню «Big Dropdown» отображалось прямо под элементом навигации.Я установил максимальную ширину для меню, но я не могу заставить его выровняться правильно.Я бы предпочел полностью адаптивное решение и «самый чистый» способ добиться этого без необходимости настраивать все мелочи.

В зеленом поле я хочу, чтобы выпадающие списки были «естественно» расположены на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.

Обратите внимание, что, поскольку вы используете навигационное меню, это выровняет раскрывающийся список справа от страницы.и не справа от выпадающей кнопки.

Обновленный обновленный пример Codepen можно найти здесь .

Редактировать: I снова разбудил пример Codepen и добавили немного Javascript и CSS, чтобы выровнять выпадающее меню по правому краю с помощью кнопки выпадающего меню вместо правой части экрана.

Answer 2

Добавить этот стиль

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