CSS Menu dropdown com subníveis responsivo

[Bruno Miqueas prog]

Olá, estou fazendo um menu bootstrap no angular 2 com typescript, e estou com um problema de responsividade no menu, ele até fica responsivo, mas se eu clicar no celular em algum subnível, ele não abre, porém, se eu pressionar, ele abre mais ainda não completamente, segue o código do menu e do css. 

.glyphicon{
  color: black;
}

.dropdown-submenu {
  position: relative;
}

  .dropdown-submenu:hover > .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px 6px;
      border-radius: 0 6px 6px 6px;
  }

  .dropdown-submenu:hover > .dropdown-menu {
      display: block;
      color: black;
  }

  .dropdown-submenu > a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: #cccccc;
      margin-top: 5px;
      margin-right: -10px;
  }

  .dropdown-submenu:link > a:after {
      border-left-color: #ffffff;
  }

  .dropdown-submenu.pull-left {
      float: none;
  }

      .dropdown-submenu.pull-left > .dropdown-menu {
          left: -100%;
          margin-left: 10px;
          -webkit-border-radius: 6px 0 6px 6px;
          -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;

      }
      
      -----------HTML-----------
      
      <nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
      aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          <i class="glyphicon glyphicon-folder-open"></i>&nbsp; Cadastros Principais
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="#">Clientes</a>
            <ul class="dropdown-menu">
              <li>
                <a [routerLink]="['/formcadcliente']">Cadastros de Clientes</a>
              </li>
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Solicita��o Limite</a>

                <ul class="dropdown-menu">
                  <li>
                    <a [routerLink]="['/formcadastrasolicitacaolimite']">Cadastrar</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formpesquisasolicitacaolimite']">Pesquisar</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown-submenu">
                <a class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a>
                <ul class="dropdown-menu">
                  <li>
                    <a [routerLink]="['/formlistcli']">Listagem de Clientes</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrankcliente']">Ranking de Clientes</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelvendasbai']">Vendas por Bairro</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelvendascli']">Vendas por Clientes</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelequipamentos']">Relat�rio de Planejamento Di�rio</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornecedores</a>

            <ul class="dropdown-menu">
              <li>
                <a [routerLink]="['/formlistclifor']">Listagem de Clientes sem Compras</a>
              </li>
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a>
                <ul class="dropdown-menu">
                  <li>
                    <a [routerLink]="['/formrelvendforn']">Resumo de Vendas por Fornecedor</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelfatforn']">Faturamento por Fornecedor</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formvendabonificacao']">Vendas X Bonifica��o</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos</a>

            <ul class="dropdown-menu">
              <li>
                <a [routerLink]="['/formrelprodnaovend']">Produtos N�o Vendidos</a>
              </li>
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a>

                <ul class="dropdown-menu">
                  <li class="dropdown-submenu">
                    <a [routerLink]="['/formrelposprod']">Cobertura por Produto(Resumido por Rep.)</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Representantes</a>
            <ul class="dropdown-menu">
              <li class="dropdown-submenu">
                <a href="#">Relat�rios</a>

                <ul class="dropdown-menu">
                  <li>
                    <a [routerLink]="['/formacampvisitacliente']">Acompanhamento das Visitas aos Clientes</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelvendaspositivacao']">Relat�rio de Vendas com Cobertura</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrelpositivacaorep']">Relat�rio de Cobertura por Representante</a>
                  </li>
                  <li>
                    <a [routerLink]="['/formrankrep']">Ranking de Representante</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown-submenu">
                <a href="#">Comiss�o</a>
                <ul class="dropdown-menu">
                  <li>
                    <a [routerLink]="['/formrelcomissao']">Anal�tico</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <!--<li role="separator" class="divider"></li>-->
        </ul>
      </li>
     </ul>
  </div>
  <!-- /.navbar-collapse -->
  <!-- /.container-fluid -->
</nav>

 

 

[DiF]

@Bruno Miqueas prog Olá,  seja bem vindo em nosso Clube do Hardware.

Bem, creio que seria melhor você postar seus códigos aqui.  Não em forma e anexo, mas em forma de texto como botão CODE <>.

 

Pois muita gente, inclusive eu, não tenho como acessar os anexos, onde estou agora. 

[Bruno Miqueas prog]

@DiF o código do menu é meio extenso, mas ta aí

[groutmoustache]

@Bruno Miqueas prog

 

Não tenho certeza se tu quer implementar um navbar Bootstrap ou se tu queres criar um navbar próprio, mas baseado no Bootstrap.

 

Caso esteja tentando implementar o navbar Bootstrap, direto do site deles:

 

Bem, nesse caso, percebi que a tua marcação está diferente da atual versão do framework:

 

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <a class="navbar-brand" href="#">Top navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
 ...

Assim, recomendo que leia esse código fonte, aqui. Ou, leia toda a nova documentação da v4 do Bootstrap, nesse link.