Fórum

Boa noite!

Estou tentando adicionar sub-menus em meu site, mas sempre que adiciono ele fica fora do menu.

Preciso adicionar o sub-menu dentro de "Modulo I".

Estou fazendo como:

<li class="nav-item">
<a class="nav-link" href="#">Modulo I</a>
<li class="dropdown-submenu"
<a class="sub-nav-link" tabindex="-1" href="#">Logica de Programação</a>
</li>
</li>

Meu código

<!-- Navegação -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid"> <!-- Bootstrap container -->
<a class="navbar-brand" href="#"><img src="img/logo.png"></a> <!--classe pra colocar a logo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav nl-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modulo I</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modulo II</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modulo III</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modulo IV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modulo V</a>
</li>
</ul>
</div>
</div>
</nav>

Meu css:

.navbar {
  padding: .8rem; /*--Lembrando que 1rem = 60px--*/
}
.navbar-nav li {
  padding-right: 20px;
}
.nav-link {
  font-size: 1.1em !important;
}