Как в bootstrap 4 сделать несколько вложенных выпадающих списков?

Question

[Никита Ершов]

Есть вот такой код

<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>

На фото виден список .

В нем 3 выпадающих меню . При нажатии на любой из них выпадает меню первого . Подскажите где моя проблема ?