Nested dropdowns do not work. Why?

Navigation
0

I have a dropdown within the other. the first one works, it opens the dropdown for the list of items. I've tried dropping another dropdown into this list but that does not work.List and connection do not work. 

<ul id="menu" class="nav nav-pills nav-justified  navbar-fixed-top">
<li role="presentation" class="active"><a
    href="index.php?pagina=inicio">inicio</a></li>
<li role="presentation" class="dropdown"><a href="dropdown-toggle"  data-toggle="dropdown" href="#">Cadastro<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li  role="presentation" class="dropdown"><a href="dropdown-toggle" data-toggle="dropdown" href="#" >Listar<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="index.php?pagina=alunos_listar">Alunos</a></li>
                <li><a href="index.php?pagina=responsaveis_listar">Responsáveis</a></li>
            </ul>
        </li>
        <li><a href="index.php?pagina=responsaveis_cadastrar">Cadastro responsáveis</a></li>
        <li><a href="index.php?pagina=responsaveis_listar">Listar responsáveis</a></li>
        <li><a href="index.php?pagina=alunos_excluirFinally">Exluir cadastro do banco de dados</a></li>
    </ul>
</li>
<li role="presentation"><a href="">Impressora</a></li>
<li role="presentation" class="dropdown"><a href="dropdown-toggle"  data-toggle="dropdown" href="#">Opções<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li  class="dropdown"><a href="dropdown-toggle" data-toggle="dropdown" href="#">Conexão<span class="caret"></span></a>
            <ul  class="dropdown-menu">
                <li><a href="index.php?Admin=Opcoes_conexao">Conexão</a></li>
            </ul>
        </li>
    </ul>
</li>
<li role="presentation"><a href="">Conexão</a></li>

<li role="presentation"><a href="logout.php">Logout</a></li>

Actually the second dropdown I wanted it to behave like the menus of any program that is opening tabs to the side. The first dropdown would be down and the others down and to the side. Like in the windows menu.

    
asked by anonymous 20.02.2017 / 12:46

1 answer

-3

This example below does not help you?

link

Updating, I think this link more matches what you want:

link

Below the example of the second bootstrap link: 

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">NavBar</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub Project</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

<div class="container">
    <div class="navbar-template text-center">
        <h1>Bootstrap NavBar</h1>
        <p class="lead text-info">NavBar with too many childs.</p>
        <a target="_blank" href="http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3">Thanks to msurguy (Multi level dropdown menu BS3)</a>
    </div>
</div>

Below the CSS used in the second 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;
    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: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.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;
}
    
20.02.2017 / 13:18
Variable percentage in c [closed] Display warnings with PHP [duplicate]