Как сделать двухуровневое меню на bootstrap 4 как на картинке?

Для создания двухуровневого меню на Bootstrap 4, как на картинке, нам понадобится использовать компоненты Navbar, Nav и Dropdown. Вот как это сделать:

1. Сначала добавим стандартную разметку Navbar из Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Логотип</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <!-- Здесь будет наше меню -->
    </ul>
  </div>
</nav>

2. Теперь добавим основное меню, которое будет содержать двухуровневый список:

<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Главная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">О нас</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Услуги</a>
    <!-- Добавляем выпадающее меню -->
    <ul class="dropdown-menu">
      <li class="nav-item"> <!-- Здесь будут элементы первого уровня выпадающего меню -->
        <a class="dropdown-item" href="#">Элемент 1</a>
      </li>
      <li class="nav-item"> <!-- Здесь будут элементы первого уровня выпадающего меню -->
        <a class="dropdown-item" href="#">Элемент 2</a>
      </li>
    </ul>
  </li>
</ul>

3. Добавим стили для выпадающего меню:

.dropdown-menu .nav-item {
  position: relative;
}

.dropdown-menu .nav-item .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 10rem;
  z-index: 1;
}

4. Наконец, добавим скрипт, чтобы активировать выпадающие меню при наведении курсора или клике:

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

});

$('.navbar .dropdown > a').click(function(){
  location.href = this.href;
});

Теперь ваше меню должно работать как на картинке. Вы можете добавлять больше элементов, настраивать стили и дополнять функционал по своему усмотрению.