<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li style="
/* width: 22%; */
/* text-align: left; */
"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Submenu</a>
<ul style="
">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Submenu1</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</li>
<li><a href="#">Link2</a></li>
</ul>