Click here to Skip to main content
14,930,588 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

I'm trying to build a menu using Bootstrap 3, seems to work well, except i'm trying to create a second level of submenu like (menu1 > submenu1 > sub-submenu1).
Looks like Bootstrap 3 doesn't support submenu anymore.
Have searched the web, but all solutions require to change a lot of CSS which I can not change or replace. web design and CSS are not my thing. Any help will be much appreciated

Thanks in advance!
Samira

What I have tried:

My navbar:

HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="font-family:'Merriweather Sans', sans-serif;font-size:12px;;">  
		<div class="container">
            <div class="navbar-header">
              <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <!-- LOGO -->
              <a class="navbar-brand" href="#"><span style="color:#fff;">Site1</span></a>              
                
                     
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
                <li class="active"><a href="index.html">home</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu1<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">sub3</a></li>
					<li><a href="#">sub4</a></li>
                  </ul>
                </li>
				<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu2<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">sub3</a></li>
                  </ul>
                </li> 
				<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3 <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
					<li><a href="#">sub1</a></li>
					<li>
					<a href="#">sub2</a>
					<ul>
					<!-- Trying to create sub-submenu here!! -->
					</ul>
					</li>                   
                  </ul>
                </li>
				<li><a href="#">menu4</a></li>
				<li ><a href="#">menu5</a></li>
                <li><a href="#">menu6</a></li>
              </ul>           
            </div><!--/.nav-collapse -->
          </div>     
        </nav>  
Posted
Updated 29-Aug-17 13:27pm
v3

1 solution

There are lots of devs with solutions: bootstrap 3 multimenu - Google Search[^]

TL;DR: Here is one from the above Google Search: SmartMenus jQuery Website Menu - Bootstrap Addon - Navbar[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900