You can use it in your html css based website.
<script>
jQuery(document).ready(function() {
jQuery('.dropdown button#menu1').on('click',function(){
var count=0;
if ( jQuery('ul.menu' ).hasClass("active") ){
jQuery('ul.menu').hide();
jQuery('ul.menu').removeClass('active');
count=1
}
if(count!=1){
jQuery('ul.menu').addClass('active');
jQuery('ul.menu').show();
}
});
});
</script>
<style>
ul.menu.active {
height: 150px !IMPORTANT;
overflow-y: scroll;
}
.dropdown {
display: block;
margin-left: auto !IMPORTANT;
margin-right: auto;
width: 120px;
}
.dropdown ul.menu {
width: 120px;
}
.dropdown ul.menu li.menu-item {
line-height: 1rem;
list-style: none;
}
.dropdown button#menu1 {
width: 120px;
}
.dropdown ul.menu {
width: 120px;
margin-top: 0px;
position: absolute;
}
</style>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Menu
<span class="caret"></span></button>
<ul class="menu" style="display:none;">
<li class="menu-item"><a href="#123">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item"><a href="#0">Shop</a></li>
<li class="menu-item"><a href="#0">Streamers</a></li>
<li class="menu-item"><a href="#456">ABC</a></li>
<li class="menu-item"><a href="#456">DEF</a></li>
<li class="menu-item"><a href="#0">12345</a></li>
<li class="menu-item"><a href="#0">Gallery</a></li>
<li class="menu-item"><a href="#789">Submenu 1</a></li>
<li class="menu-item"><a href="#0">Submenu 2</a></li>
<li class="menu-item"><a href="#0">Submenu 3</a></li>
<li class="menu-item"><a href="#0">Random Text</a></li>
<li class="menu-item"><a href="#0">Submenu 5</a></li>
<li class="menu-item"><a href="#0">Submenu 6</a></li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ul>
</div>