<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"> <div class="wrap-drop" id="noble-gases"> <span>All Noble Gases</span> <ul class="drop"> <li class="selected"><a>All Noble Gases</a></li> <li><a>Helium</a></li> <li><a>Neon</a></li> <li><a>Argon</a></li> <li><a>Krypton</a></li> <li><a>Xenon</a></li> <li><a>Radon</a></li> </ul> </div> </div> </div>

@import url("//fonts.googleapis.com/css?family=Maven+Pro"); html,body { background-color:#43362a; font-family:"Maven Pro", sans-serif; padding:2rem 1rem; } .wrap-drop { background:#e7ded5; box-shadow:3px 3px 3px rgba(0,0,0,.2); cursor:pointer; margin:0 auto; max-width:225px; padding:1rem; position:relative; width:75%; z-index:3; } .wrap-drop::after { border-color:#695d52 transparent; border-style:solid; border-width:10px 10px 0; content:""; height:0; margin-top:-4px; position:absolute; right:1rem; top:50%; width:0; } .wrap-drop .drop { background:#e7ded5; box-shadow:3px 3px 3px rgba(0,0,0,.2); display:none; left:0; list-style:none; margin-top:0; opacity:0; padding-left:0; pointer-events:none; position:absolute; right:0; top:100%; z-index:2; } .wrap-drop .drop li a { color:#695d52; display:block; padding:1rem; text-decoration:none; } .wrap-drop span { color:#928579; } .wrap-drop .drop li:hover a { background-color:#695d52; color:#e7ded5; } .wrap-drop.active::after { border-width:0 10px 10px; } .wrap-drop.active .drop { display:block; opacity:1; pointer-events:auto; }

// Inspiration: https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/ function DropDown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('ul.drop li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents: function () { var obj = this; obj.dd.on('click', function (e) { e.preventDefault(); e.stopPropagation(); $(this).toggleClass('active'); }); obj.opts.on('click', function () { var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text(obj.val); opt.siblings().removeClass('selected'); opt.filter(':contains("' + obj.val + '")').addClass('selected'); }).change(); }, getValue: function () { return this.val; }, getIndex: function () { return this.index; } }; $(function () { // create new variable for each menu var dd1 = new DropDown($('#noble-gases')); // var dd2 = new DropDown($('#other-gases')); $(document).click(function () { // close menu on document click $('.wrap-drop').removeClass('active'); }); });