How to make multiple nested dropdowns in bootstrap 4?

Question

css

There is this code

<a class="nav-link dropdown-toggle" href="#" id="Navig_Stud" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Обучающимся</a>
        <div class="dropdown-menu" aria-labelledby="Navig_Stud">
    
    <a class=" nav-link dropdown-toggle" href="#" id="Navig_Stud_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Обучающимся</a>

        <div class="dropdown-menu" aria-labelledby="Navig_Stud_2">
    <a class="dropdown-item" href="/">Расписание занятий</a> 
     <a class="dropdown-item" href="/">Расписание экзаменов</a>
     <a class="dropdown-item" href="/">Устав техникума</a>
     <a class="dropdown-item" href="/">Правила внутреннего распорядка</a> 
     <a class="dropdown-item" href="/">Производственное обучение</a>
     <a class="dropdown-item" href="/">ЕГЭ</a>
     <a class="dropdown-item" href="/">Информация о выпускниках</a>
     <a class="dropdown-item" href="/">Сборник материалов ЗОЖ и ГТО</a>
  </div>
  
  
  <a class="dropdown-item" href="">Заочникам</a>


  <a class="dropdown-item" href="">Перспективы обучения</a>

  <a class="dropdown-item" href="">Электронная библиотека</a>

  <a class="dropdown-item" href="">Дорожная безопасность</a>
  
  
  
  
<a class=" nav-link dropdown-toggle" href="#" id="Navig_Centr" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Центр трудоустройства</a>
<div class="dropdown-menu" aria-labelledby="Navig_Centr">
    <a class="dropdown-item" href="/">Вакансии</a>
    <a class="dropdown-item" href="/">О центре</a>
    <a class="dropdown-item" href="/">Статистика трудоустройства</a>
    <a class="dropdown-item" href="/">Наши партнеры</a>
    <a class="dropdown-item" href="/">Федеральные новости</a>
    <a class="dropdown-item" href="/">Актуальные нормативные документы</a>
    <a class="dropdown-item" href="/">Перечень необходимых документов для трудоустройства</a>
    <a class="dropdown-item" href="/">Трудоустройство инвалидов</a>
    <a class="dropdown-item" href="/">Мошенники</a>
    <a class="dropdown-item" href="/">Что нужно знать при приеме на работу</a>
    <a class="dropdown-item" href="/">Права работника</a>
    <a class="dropdown-item" href="/">Как заполнять анкету</a>
    <a class="dropdown-item" href="/">Контактная инвормация</a>
  </div>
  
  
<a class="dropdown-item" href="">Жизнь САТТ	</a>
  
  
<a class=" nav-link dropdown-toggle" href="#" id="Nagiv_Galery" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Галерея</a>
<div class="dropdown-menu" aria-labelledby="Nagiv_Galery">
    <a class="dropdown-item" href="/">Достижения</a>
    <a class="dropdown-item" href="/">Видеодостижения</a>
  </div>
  
  
  <a  class="dropdown-item" href="">Списки групп нового набора</a>
  
  </div>

The photo shows the list.

It has 3 drop down menus. When you click on any of them, the menu of the first one drops out. Tell me where is my problem?