我有一个菜单，该菜单在移动导航中显示第一个下拉菜单的选项，但是当我单击第一个下拉菜单中的另一个下拉菜单时，没有任何反应。此外，下拉菜单仅在项目主页中打开。我还希望该子菜单将CSS保留在其他菜单之外。该如何解决？
菜单：
<style>
#navbar-id {
padding-top: 10px;
padding-right: 20px;
}
</style>
<div style=''>
<div style=" width: 100%; ">
<div id="navbar">
<nav class="navbar navbar-dark bg-dark">
<nav class=" navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav navbar-left">
</ul>
<ul id="navbar-id" class="nav navbar-nav navbar-right">
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".instituto_menu") %></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".sobre_o_ime_menu") %></a>
<ul class="dropdown-menu", style="width: 100%; height: auto; margin:0 auto;">
<li><a href="/history"><%= t (".historia_menu") %></a></li>
<li><a href="/past_directors"><%= t (".galeria_de_diretores_menu") %></a></li>
</ul>
</li>
<li><a href="/adm_structure"><%= t (".estrutura_administrativa_menu") %></a></li>
<li><a href="/collegiate_and_commissions"><%= t (".colegiado_menu") %></a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".departamentos_menu") %></a>
<ul class="dropdown-menu", style="width: 200%; height: auto; margin:0 auto;">
<li><a href="/departments/1"><%= t (".departamentoanalisematematica_menu") %></a></li>
<li><a href="/departments/2"><%= t (".departamentoestruturasmatematicas_menu") %></a></li>
<li><a href="/departments/3"><%= t (".departamentogeometriarepresentacaografica_menu") %></a></li>
<li><a href="/departments/4"><%= t (".departamentoinformaticacienciadacomputacao_menu") %></a></li>
<li><a href="/departments/5"><%= t (".departamentoestatistica_menu") %></a></li>
<li><a href="/departments/6"><%= t (".departamentomatematicaaplicada_menu") %></a></li>
</ul>
</li>
<li><a href="/ime_legislation"><%= t (".legislação_menu") %></a></li>
<li><a href="/tender"><%= t (".concursos_menu") %></a></li>
<li><a href="/publications"><%= t (".noticias_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".pessoas_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/professors"><%= t (".docentes_menu") %></a></li>
<li><a href="/staff"><%= t (".funcionarios_menu") %></a></li>
<li><a href="/visiting_professors"><%= t (".prof_visitantes_menu") %></a></li>
<li><a href="/retired_professors"><%= t (".prof_aposentados_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".extensão_cultura_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/cepuerj_courses"><%= t (".cursos_cepuerj_menu") %></a></li>
<li><a href="/caime"><%= t (".caime_menu") %></a></li>
<li><a href="/extension_projects"><%= t (".projetos_extensão_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".eventos_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/ime_seminars"><%= t (".seminarios_menu") %></a></li>
<li><a href="/other_events"><%= t (".outros_eventos_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".pesquisa_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/research_areas"><%= t (".areas_pesquisa_menu") %></a></li>
<li><a href="/laboratories"><%= t (".laboratórios_menu") %></a></li>
<li><a href="/financial_aids"><%= t (".bolsas_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".cursos_grad_menu") %></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="/courses/1">
<%= t (".computação_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/monitor"><%= t (".monitoria_menu") %></a></li>
<li><a href="/schedule"><%= t (".horários_menu") %></a></li>
<li><a href="/subjects"><%= t (".disciplinas_menu") %></a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="/courses/2">
<%= t (".atuariais_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/monitor"><%= t (".monitoria_menu") %></a></li>
<li><a href="/schedule"><%= t (".horários_menu") %></a></li>
<li><a href="/subjects"><%= t (".disciplinas_menu") %></a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="/courses/3">
<%= t (".estatistica_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/monitor"><%= t (".monitoria_menu") %></a></li>
<li><a href="/schedule"><%= t (".horários_menu") %></a></li>
<li><a href="/subjects"><%= t (".disciplinas_menu") %></a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="/courses/4">
<%= t (".matematica_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/monitor"><%= t (".monitoria_menu") %></a></li>
<li><a href="/schedule"><%= t (".horários_menu") %></a></li>
<li><a href="/subjects"><%= t (".disciplinas_menu") %></a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="/courses/5">
<%= t (".matematica_licenciatura_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/monitor"><%= t (".monitoria_menu") %></a></li>
<li><a href="/schedule"><%= t (".horários_menu") %></a></li>
<li><a href="/subjects"><%= t (".disciplinas_menu") %></a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".pos_grad_menu") %></a>
<ul class="dropdown-menu">
<li><a href="http://ccomp.ime.uerj.br/"><%= t (".pos_ciencias_computacionais") %></a></li>
<li><a href="http://www.profmat-sbm.org.br/"><%= t (".pos_mestrado_profissional") %></a></li>
<li><a href="http://www.avatar.ime.uerj.br/mba/"><%= t (".pos_mba") %></a></li>
<li><a href="http://especializacaomat.ime.uerj.br/"><%= t (".pos_especializacao_aprendizagem") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".contato_menu") %></a>
<ul class="dropdown-menu">
<li><a href="/contact_us"><%= t (".fale_conosco_menu") %></a></li>
<li><a href="/webmaster"><%= t (".webmaster_menu") %></a></li>
</ul>
</li>
<li class="dropdown-header" style="padding:3px 10px;">
<a href="#" class="kopie" data-toggle="dropdown"><%= t (".serviços_menu") %></a>
<ul class="dropdown-menu">
<li><a href="https://www.professoronline.uerj.br/"><%= t (".professor_online_menu") %></a></li>
<li><a href="https://www.alunoonline.uerj.br/requisicaoaluno/requisicaoacesso.php?requisicao=LoginAlunoOnline"><%= t (".aluno_online_menu") %></a></li>
<li><a href="http://bibliotecactca.blogspot.com.br/"><%= t (".biblioteca_menu") %></a></li>
<li><a href="https://reservas.ime.uerj.br/"><%= t (".reserva_menu") %></a></li>
<li><a href="http://chamados.ime.uerj.br/"><%= t (".suporte_menu") %></a></li>
<li><a href="http://mail.ime.uerj.br/"><%= t (".webmail_menu") %></a></li>
</ul>
</li>
</ul>
<!-- /.navbar-collapse -->
</nav>
</nav>
</div>
</div>
</div>