Add second level of sub menu to bootstrap navbar

See more:

CSS

HTML

menu

bootstrap

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:

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