Bootstrap menu does not open submenu

Navigation
1

Why not open the submenu in this menu that I implemented, I do not think the error. Anyone know?

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>
    
asked by anonymous 01.12.2016 / 18:50

2 answers

1

Your menu is normal, it stops working when it does not find the js files so it may be that your reference is wrong.

Link 1 had a tag closing without being opened.

Test these: 

<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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Issue 1:

The bootstrap has removed the functionality of the dropdown-submenu as shown in the link below, but you can add an additional css to do this same functionality:

link 

        .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><scriptsrc="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>
    
01.12.2016 / 19:00
1

It does not work because Bootstrap 3 does not support submenus, the dropdown-submenu class you used was probably Bootstrap 2.

If you really want to use submenus with Bootstrap 3 you will need to use some plugins for the bootstrap, such as Bootstrap-submenu

    
01.12.2016 / 19:28
Problems with jQuery print function Fill in a list with Json's return