Submenu Drop Down in Bootstrap not working - html

Question

I am trying to add a submenu for the 3rd item in the list that is in a dropdown from the item in the navbar, I've tried using the classes built into bootstrap and was unsuccessful. This is in my navbar
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
Edit:
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
<!-- from w3schools-->
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
This link better shows what I want to do but haven't been able to.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Answer 1

Check below snippet.
As per your given link you need to change little html code and you have to add script to toggle dropdown.
You can also achieve this using css. see https://codepen.io/Magisters/pen/MwbeWv
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li class="dropdown-submenu">
item3<span class="caret"></span>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>