Drop-down menu with bootstrap

Question

Drop-down menu with bootstrap

Navigation

#1 by (1 votes)

2

I'm studying bootstrap. precisely, a menu. and I was confused because it is not repeating the dropdown again. But only in 1 specific LI.

Thank you!

CSS

HTML:

<div id="sidebar-nav" class="sidebar">
        <div class="sidebar-scroll">
            <nav>
                <ul class="nav">
                    <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>Página Inicial</span></a></li>
                    <!--FUNCIONA PERFEITAMENTE ABAIXO -->
                    <li>
                        <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                        <div id="subPages" class="collapse">
                            <ul class="nav">
                                <li><a href="page-profile.html" class="">Cliente</a></li>
                                <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                    <li><a href="page-login.html" class="">Moto</a></li>

                            </ul>
                        </div>
                    </li>

                    <li><a href="charts.html" class=""><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>

                    <li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
                    <li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
                    <!--QUANDO CLICA ESTA ABRINDO O PRIMEIRO DROPDOWN E NAO ESTE! -->
                                            <li>
                        <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                        <div id="subPages" class="collapse">
                            <ul class="nav">
                                <li><a href="page-profile.html" class="">Cliente</a></li>
                                <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                    <li><a href="page-login.html" class="">Moto</a></li>

                            </ul>
                        </div>
                    </li>
                    <li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
                    <li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
                    <li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
                </ul>
            </nav>
        </div>
    </div>

CSS: link

css twitter-bootstrap

asked by anonymous 19.06.2018 / 00:04

1 answer

Recursion in Java Queue Filter PivotTable by ListBox

score 1 · Accepted Answer

Is not it an ID conflict? try using the following code.

<div id="sidebar-nav" class="sidebar">
    <div class="sidebar-scroll">
        <nav>
            <ul class="nav">
                <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>Página Inicial</span></a></li>
                <!--FUNCIONA PERFEITAMENTE ABAIXO -->
                <li>
                    <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                    <div id="subPages" class="collapse">
                        <ul class="nav">
                            <li><a href="page-profile.html" class="">Cliente</a></li>
                            <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                <li><a href="page-login.html" class="">Moto</a></li>

                        </ul>
                    </div>
                </li>

                <li><a href="charts.html" class=""><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>

                <li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
                <li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
                <!--QUANDO CLICA ESTA ABRINDO O PRIMEIRO DROPDOWN E NAO ESTE! -->
                                        <li>
                    <a href="#subPages2" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                    <div id="subPages2" class="collapse">
                        <ul class="nav">
                            <li><a href="page-profile.html" class="">Cliente</a></li>
                            <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                <li><a href="page-login.html" class="">Moto</a></li>

                        </ul>
                    </div>
                </li>
                <li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
                <li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
                <li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
            </ul>
        </nav>
    </div>
</div>

As you can see I just changed the ID of the first DIV, remember the HTML ID is unique and each element must have a different one otherwise conflicts can occur, I am available.