Nested dropdowns don’t work. Why?

Asked

Viewed 162 times

0

I have a dropdown inside the other. the first one works, it opens the dropdown to the list of items. I tried to put another dropdown inside that list but it doesn’t work. Listing 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 to behave like the menus of any program that will open tabs to the side. The first dropdown would be down and the others down and to the side. As in the windows menu.

html dropdown

  • Actually the second dropdown I wanted to behave like the menus of any program that will open tabs to the side. The first dropdown would be down and the others down and to the side. As in the windows menu.

  • How is the CSS?

  • in this case I am using the pure bootstrap even with the "Caret".

  • .Caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: Middle; border-top: 4px dashed; border-top: 4px Solid 9; border-right: 4px Solid Transparent; border-left: 4px Solid Transparent; }

  • it works only with a dropdown, the Caret only makes the indication triangle as far as I know. the dropdown-menu that makes the downward movement.

  • want that https://encrypted-tbn0.gstatic.com/images?q=tbn:And9gcshmzdlvbjkln5kz3uiyg1zr0xkyfg7lpjdhhyv0t_g2ejhk5dqza

  • There is a syntax error when closing 1° ul,,,

Show 2 more comments

1 answer

-3

This example below does not help you?

https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

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

https://codepen.io/ajaypatelaj/pen/prHjD

Below the example of the second link with bootstrap:

<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 also 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;
}
  • 2

    This link may be a good suggestion, but your reply will not be valid if one day the link crashes. In addition, it is important for the community to have content right here on the site. It would be better to include more details in your response. A summary of the content of the link would be helpful enough! Learn more about it in this item of our Community FAQ: We want answers that contain only links?

  • what I want. I’ll study it now. However it’s interesting that it hasn’t worked in bootstrap. I mean, nesting dropdowns as I did.

  • I will still need to learn more about this feature. because even in the example of the link occurs an unwanted behavior. Open dropdowns do not update, that is, they do not return to normal status until they are clicked again or the page updates. clicking off the dropdown does not restart it. Strange.

Browser other questions tagged html dropdown

You are not signed in. Login or sign up in order to post.