Question

35

Dropdown submenu on bootstrap is not working

rated 0 times [ 38] [ 3] / answers: 1 / hits: 16432 / 9 Years ago, mon, july 6, 2015, 12:00:00

I just wanna ask why is it the dropdown submenu on bootstrap is not working, i just followed the instructions in this link: (http://getbootstrap.com/2.3.2/components.html) but still the dropdown sub menu on a submenu did not appear. By the way I did not change or override classes in the CSS.

Here's my code! :)

<li class='dropdown'><a class='dropdown-toggle active' data-toggle='dropdown' href='#'><img src = 'images/forbank.png' height = 35 width = 35>Banking<span class='caret'></span></a>

                <ul class='dropdown-menu'>

                    <li class = 'dropdown-submenu'><a tabindex='-1' href='#'><span class = 'glyphicon glyphicon-cog'> </span>  Transaction</a>

                        <ul class='dropdown-menu' role = 'menu'>

                            <li><a tabindex='-1' href='#'> Withdrawal / Deposit </a></li>

                            <li><a tabindex='-1' href='#'> Fixed Deposit </a></li>

                        </ul>

                    </li>

                    <li role='separator' class='divider'></li>

                    <li><a href='#'><span class='glyphicon glyphicon-list-alt'> </span> Summaries </a></li>

                    <li><a href='#'><span class='glyphicon glyphicon-wrench'> </span>  Settings </a></li>

                </ul>

            </li>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

montana

Add To Favorites

Follow

Total Points: 675

Total Questions: 86

Total Answers: 102

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

answered 9 Years ago dominics · Accepted Answer

Please verify if your the instructions you have followed corresponds to your bootstrap version.

Additionally, you can try to include this few lines of CSS to make things work.

.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;

}