1

Por que não abre o submenu neste menu que implementei, não acho o erro. Alguém sabe?

Bootstrap v3.3.7 jQuery v3.1.1

<!DOCTYPE html>
<html>
<head>
     <title>Menu</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link type="text/css"      href="../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">

     <script type="text/javascript" src="../../resources/js/jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="../../resources/bootstrap/js/bootstrap.min.js"></script>
 </head>
  <body>
    <nav class="navbar navbar-default">
       <div class="container-fluid">
            <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="#" style="padding: 5px 15px;"><img src="#" width="160"></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Link 1</span></a></li>
                <li><a href="#">Link 2</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link 3 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.1</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Link 3.1.1</a></li>
                                <li><a href="#">Link 3.1.2</a></li>
                                <li><a href="#">Link 3.1.3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Link 3.2</a></li>
                        <li><a href="#">Link 3.3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

2 Respostas 2

1

Seu menu esta normal, ele para de funcionar quando não encontra os arquivos js então pode ser que sua referência esteja errada.

No link 1 tinha uma tag fechando sem ser aberta.

Teste com esses:

<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Edição 1:

O bootstrap removeu a funcionalidade do dropdown-submenu conforme mostrado no link abaixo, mas você pode adicionar um css adicional para fazer esta mesma funcionalidade:

https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing

        .dropdown-submenu {
            position: relative;
        }

            .dropdown-submenu > .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;
            }

            .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:hover > 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;
                }
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <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="#" style="padding: 5px 15px;">
                    <img src="#" width="160">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link 3<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.1</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link 3.1.1</a></li>
                                    <li><a href="#">Link 3.1.2</a></li>
                                    <li><a href="#">Link 3.1.3</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.2</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link 3.2.1</a></li>
                                    <li><a href="#">Link 3.2.2</a></li>
                                    <li><a href="#">Link 3.2.3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link 3.3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

5
  • No seu exemplo também não funciona, no caso, eu preciso que abra o submenu do submenu, ou seja, o Link 3.1.1 1/12/2016 às 18:15
  • Não tinha visto que eram 3 niveis, editei minha resposta espero ter ajudado. 1/12/2016 às 18:52
  • Show de bola, resolveu meu problema. Obrigado, abraços! 1/12/2016 às 22:19
  • @Alisson só tome cuidado com essa solução pois ela não funciona bem em dispositivos móveis, pois como ela usa o :hover para abrir os submenus ela não funciona bem com telas de toque, onde você não vai ter um cursor 2/12/2016 às 11:44
  • @LeandroGodoyRosa, ola Leandro, você tem algum código de como fazer de uma forma que funcione também no dispositivo móvel? 2/12/2016 às 11:54
1

Não funciona pois o Bootstrap 3 não suporta submenus, a classe dropdown-submenu que você usou provavelmente era do Bootstrap 2.

Se realmente quiser usar submenus com o Bootstrap 3 você vai precisar usar algum plugin para o bootstrap, como por exemplo o Bootstrap-submenu

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 .