Add dropdown to menu

Question

Hey there, guys. I’m having a little trouble adding a dropdown to my menu. I’m using bootstrap and I already checked how to do it. But in mine, the class is different and when I change, the structure of my menu also changes. I wanted to know how to add the dropdown function to a button on my menu.

        <!-- Main Menu Start -->
        <div class="main-menu">
            <div class="navbar-wrapper">
                <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Alternar Navegação</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="index.html" class="logo"><img src="img/logo.png" alt="Logo" /></a>                     
                        </div>

                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="mvv.html">Ideologia</a></li>
                            <li><a href="contatos.html">Contatos</a></li>
                            <li><a href="links_corporativo.html">Sistemas</a></li>
                            <li><a href="filiais.html">Filiais</a></li>
                            <li><a href="docs.html">Formulários</a></li>
                            <li><a href="#feature-work">Galeria</a></li>
                            <li><a href="jornaltupan.html">Notícias</a></li>
                            <li><a href="http://pop.tupan.net">Procedimentos</a></li>
                            <li><a href="gg.html">Gente e Gestão</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Menu End -->

Answer 1

Try to take this as a basis, just click on the registration word that will have a functional dropdown, using bootstrap, because looking at your code I have come to the conclusion that you are using it

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Início do sript JQuery JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Fim do script JQuery JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav side-nav">
          <li>
              <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-keyboard-o"></i> Cadastro <i class="fa fa-fw fa-caret-down"></i></a>
              <ul id="demo" class="collapse">
                  <li class="active">
                      <a href="cad_cep.php"><i class="fa fa-compass"></i> CEP's (Códigos Postais)</a> 
                  </li>
                  <li>
                      <a href="cad_cli.php"><i class="fa fa-users"></i> Clientes</a>         
                  </li>
                  <li>
                      <a href="cad_for.php"><i class="fa fa-dropbox"></i> Fornecedores</a>         
                  </li>
                  <li>
                      <a href="cad_func.php"><i class="fa fa-credit-card"></i> Funcionários</a>                               
                  </li>
                  <li>
                      <a href="cad_idenfunc.php"><i class="fa fa-info"></i>  Identificação de Funcionários</a>                                
                  </li>
                  <li>
                      <a href="cad_pessoa.php"><i class="fa fa-user"></i> Pessoas</a>
                  </li>
                  <li>
                      <a href="cad_pro.php"><i class="fa fa-fw fa-shopping-cart"></i> Produtos</a>
                  </li>
                  <li>
                      <a href="cad_trans.php"><i class="fa fa-truck"></i> Transportadoras</a>                              
                  </li>
                  <li>
                      <a href="cad_est.php"><i class="fa fa-map-marker"></i> Unidades da Federação</a>
                  </li>
                  <li>
                      <a href="cad_veic.php"><i class="fa fa-car"></i> Veiculos</a>
                  </li>
              </ul>
          </li>
      </ul>
</div>