<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> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul> <li><a href="#">First</a></li> <li class="has-submenu"><a class="link" href="#">Second</a> <ul class="submenu"> <li><a href="#">submenu 1</a></li> <li><a href="#">submenu 1</a></li> </ul> </li> <li><a href="#">Third</a></li> <li class="has-submenu"><a class="link" href="#">Fourth</a> <ul class="submenu"> <li><a href="#">submenu 2</a></li> <li><a href="#">submenu 2</a></li> </ul> </li> </ul> </div> </div>

ul { list-style:none; } ul li { width:200px; background-color: #3f3f3f; margin-bottom:1px; } ul li a {color:#fff;padding:3px 0px 3px 10px; disbplay:block; text-decoration:none;} ul li.has-submenu ul { display:none; } .submenu li {width:100px;}

// Toggle jQuery(document).ready(function(){ $('li.has-submenu a.link').click(function() { $(this).next('.submenu').slideToggle(500); }); });