Drop-down menu with bootstrap

Asked

Viewed 92 times

2

I’m studying bootstrap. Precisely, a menu. and I was confused because it is not repeating the dropdown again. However only in 1 "LI" specific.

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: https://pastecode.xyz/view/f8aaee66

css twitter-bootstrap

  • Good evening further specify your question please.

  • The code below the comment serves to create a drop down. In fact the first time the code below the comment works. but if I repeat it opens the top and not the bottom(drop down)

  • You’re wearing the same id in both.

  • It’s not a conflict with the Ids?

1 answer

1


Not 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 case otherwise conflicts may occur, I am available.

  • thanks for answering personal! also thought it was the ID. I made the switch. Still it remains. let’s say I put #subPages2. even though #subpages is called.

  • HAHAHHAHAH WHAT GROTESQUE ERROR. MISSED I CHANGE ID OF THE BASS.<div id="subPages2" class="Collapse"> PEOPLE’S WORTH!

  • Since my answer helped you ,you could vote in favor of the answer to help me?

Browser other questions tagged css twitter-bootstrap

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