CODEWITHSUNDEEP
html
saleh
saleh

Reputation: 347

I want to create a drop-down subcategory under a category in my navbar

I almost created it but there is still an important part to creating another subcategory inside the subcategory.

enter image description here

In this picture category is 'Platform' and subcategory is 'PC' and I want to create another subcategory called 'game' inside the 'PC'. The problem is that when I click on the PC, the drop-down does not work

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
<div class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">

                    <div class="navbar-header">
                        <button class="navbar-toggle" data-target="#mobile_menu" data-toggle="collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                    </div>
                    <div class="navbar-collapse collapse" id="mobile_menu">
                        <ul class="nav navbar-nav">
                            <!-- from her -->
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Platforms<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">PC<span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">game</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <!-- to here -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Any suggest to fix this?

Upvotes: 0

Views: 1095

Answers (1)

Hari Perisetla
Hari Perisetla

Reputation: 176

Bootstrap natively doesn't support multilevel dropdowns natively. You can try to add some css and jquery to the code to achieve them. Here is a good explanation in w3schools which you can refer to:

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

Upvotes: 1

Related Questions