<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 center"> <h2 class="center">Dropdown Menu by jquery</h2> </div> </div> <div id="nav" class="center"> <div class="relative left m10"> <a class="dropdown-toggle" href="#">Menu</a> <ul class="dropdown"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Search</a></li> </ul> </div> <div class="relative left m10"> <a class="dropdown-toggle relative" href="#">Menu2</a> <ul class="dropdown"> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Search</a></li> </ul> </div> </div>

.center{margin:0 auto;text-align:center;} body { padding: 2em; } a { text-decoration: none; color: #fff; } /**** ****/ div#nav { position: relative; } div#nav a { padding: 5px 15px 5px; } .dropdown-toggle { padding: 0; background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 51%, #1A2980 100%) } /**** ****/ ul.dropdown { display: none; position: absolute; top: 100%; margin-top: 5px; padding: 5px 5px 0 0; background: #000; } ul.dropdown li { list-style-type: none; } ul.dropdown li a { text-decoration: none; padding: 0em 1em; display: block; } a:hover{color:#fff;text-decoration:none;} .relative{position:relative} .left{float:left;} .m10{margin:10px;} .w100{width:100%;}

$(function() { // Dropdown toggle $('.dropdown-toggle').click(function() { $(this).next('.dropdown').slideToggle(); }); $(document).click(function(e) { var target = e.target; if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) //{ $('.dropdown').hide(); } { $('.dropdown').slideUp(); } }); });