Добавить второй уровень подменю для установки панели навигации

---

Привет,

Я пытаюсь создать меню с помощью Bootstrap 3, кажется, работает хорошо, за исключением того, что я пытаюсь создать второй уровень подменю типа (menu1 > submenu1 > sub-submenu1).
Похоже, Bootstrap 3 больше не поддерживает подменю.
Поискал в интернете, но все решения требуют изменить много CSS, которые я не могу изменить или заменить. веб-дизайн и CSS-это не мое. Любая помощь будет очень признательна

Заранее спасибо!
Самира

Что я уже пробовал:

Мой навигатор:

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

---