Tenho essa navbar
na parte esquerda da minha tela
<div class="main-menu">
<ul>
<li>
<a href="listCadastro.php" onclick="">
<span class="menu-icon">
<i class="fa fa-file-text fa-lg"></i>
</span>
<span class="text">
Cadastros
</span>
<span class="menu-hover"></span>
</a>
</li>
<li>
<a href="listCadastro.php" onclick="">
<span class="menu-icon">
<i class="fa fa-file-text fa-lg"></i>
</span>
<span class="text">
Informações
</span>
<span class="menu-hover"></span>
</a>
</li>
<li>
<a href="listCadastro.php" onclick="">
<span class="menu-icon">
<i class="fa fa-file-text fa-lg"></i>
</span>
<span class="text">
Cartas
</span>
<span class="menu-hover"></span>
</a>
</li>
<li>
<a href="listCadastro.php" onclick="">
<span class="menu-icon">
<i class="fa fa-file-text fa-lg"></i>
</span>
<span class="text">
Relatórios
</span>
<span class="menu-hover"></span>
</a>
</li>
</ul>
</div>
Gostaria de adicionar submenus
de forma que quando clicasse em cadastros por exemplo, esse submenus
apareceriam embaixo do botão de cadastros, enquanto os outros botões iriam pra baixo.
Há alguma forma de fazê-lo?