How to create a submenu dropdown into an item menu in Bootstrap?

Question

I have a submenu working but now I want to create a submenu into item of menu to open other options. I created an item Produtos on menu and now I want to create other options to this item Produtos.

for example: Produtos>open>Categorias and Produto as its options.

How could I do this ?

Trying

<!-- Links Inicio -->
            <ul class="nav navbar-nav navbar-left">
                <!-- Menu dropdown Inicio -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastros <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <!--dropdown produtoss-->
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos <b class="caret"></b></a> 
                            <ul class="dropdown-menu">
                                <li><a href="#">Categoria</a></li>
                                <li><a href="#">Produto</a></li>
                            </ul>
                        </li>
                        <!--Fim dropdown produtos-->

                        <li><a href="#">Sub-Link 2</a> </li>
                        <li class="divider"></li>
                        <li><a href="#">Sub-Link 3</a> </li>
                        <li><a href="#">Sub-Link 4</a> </li>
                        <li class="divider"></li>
                    </ul>
                </li>
                <!-- Menu dropdown Fim -->

            </ul>
            <!-- Links Fim -->

I have found a great solution to this issue in ngBootstrap for angular on gihub, The solution suggested by "alexistoulotte" is to create a directive and use it as a dropdown. github.com/ng-bootstrap/ng-bootstrap/issues/… — Pini Cheyni
– Pini Cheyni, Commented Jan 30, 2022 at 10:40

FernandoPaiva · Accepted Answer · 2016-10-15 16:21:11Z

3

I found exactly what I wanted.

found here: link

answered Oct 15, 2016 at 16:21

FernandoPaiva

4,45014 gold badges63 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devang · Accepted Answer · 2016-10-15 09:06:49Z

2

It's very easy to create sub nav in web. I would like to tell that you should try from your end first and encounter any error or issue then visit stackoverflow. So I would request you to please check css-tricks site where you will get proper idea to create sub nav.

You can also take the reference of below links.

  [1]: [https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/][1]
  [2]: [http://codepen.io/RayM/details/JCtij][1]

answered Oct 15, 2016 at 9:06

Devang

4541 gold badge8 silver badges19 bronze badges

Comments

Chiragh Dewan · Accepted Answer · 2016-10-15 02:01:47Z

Hope this should help

#menu_container {
    width: 100%;
    background: rgb(250,252,254);
    border: 1px solid rgb(128,128,128);
    font-family: Arial;
    font-size: 9pt;
}

ul#menu, ul.submenu{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li{
    float: left;
}
/* hide the submenu */
li ul.submenu {
    display: none;
}
ul#menu li a{
    display: block;
    text-decoration: none;
    padding: 7px 14px;
    float:none;
    color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover > ul.submenu{
    display: block;
    position: absolute;
    float:left;
    border: 1px solid rgb(128,128,128);
}
ul.submenu li:hover > ul.submenu{
    display: block;
    position:absolute;
    left:100%;
    top:0;
    border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li,  ul#menu li:hover a {
    float: none;
    background: rgb(230,240,254);
    color: #000;
}
ul#menu li:hover li a {
    background: rgb(250,252,254);
    color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
    background: rgb(230,240,254);
    color: #000;

}

<div id="menu_container">
    <ul id="menu">
    <li><a href="#">File</a>
        <ul class="submenu">
            <li><a href="#">Close</a></li>
        </ul>
    </li>
    <li><a href="#">Edit</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>

    <li><a href="#">View</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a>
                <ul class="submenu"><li><a href="#">SubSubmenu</a></li></ul>
            </li>
                
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>


    <li><a href="#">Logoff</a></li>
    </ul>
</div>

Collectives™ on Stack Overflow

How to create a submenu dropdown into an item menu in Bootstrap?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related