4

Estou tentando adicionar um subitem abaixo de about mas não estou conseguindo. Testei com as tags ul e li, mas não funcionou.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
       </ul>
</div>

Alguma sugestão?

1

4 Respostas 4

11
    <ul class="nav nav-pills">
...
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>SubMenu1</li>
          <li>SubMenu2</li>
        </ul>
      </li>
     ...
    </ul>

Mais detalhes olhe: http://getbootstrap.com/components/#nav

2
  • Dessa forma deu certo, obrigado.
    – Diego
    Commented 11/04/2016 às 18:17
  • Não há do que... :)
    – Tiago S
    Commented 11/04/2016 às 18:20
6

Não sei se é o que você quer, mas aqui deu certo assim:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                            <ul>
                                <li><a href="#">Teste</a></li>
                            </ul>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
       </ul>
</div>
1
  • 1
    Dessa forma saiu tudo desconfigurado, mas obrigado pela ajuda :)
    – Diego
    Commented 11/04/2016 às 18:16
2

Teste com está estrutura:

<ul class="nav nav-tabs">
 ...
 <li role="presentation" class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
   Dropdown <span class="caret"></span>
   </a>
    <ul class="dropdown-menu">
     ...
    </ul>
  </li>
...
</ul>
1
  • Dessa forma deu certo. Obrigado.
    – Diego
    Commented 11/04/2016 às 18:17
2

Na documentação mostra o exemplo básico de um dropdown na seguinte estrutura:

li
  > a 
  > ul
     > li
     > + li's ...
  > /ul
/li

Onde <a> referencia o menu <ul> como ancora.

Para funcionar apenas inclua a classe dropdown no <li> pai e as classes dropdown no atributo data-toggle e dropdown-toggle na classe da tag <a> e referencie utilizando a classe dropdown-menu no <ul>, assim:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
  <ul class="nav navbar-nav">

    <li class="dropdown">

      <a href="#" data-toggle="dropdown" class="dropdown-toggle"> About <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Enterprise</a></li>
        <li><a href="#">Autor</a></li>
        <li><a href="#">Something else</a></li>
      </ul>

    </li>

    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

Veja funcionando no jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .