Web Development

Click Button and show Drop down menu using CSS and jQuery

You can use it in your html css based website.


jQuery(document).ready(function() {

jQuery('.dropdown button#menu1').on('click',function(){
 var count=0;

if (  jQuery('ul.menu' ).hasClass("active")     ){ 





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;
<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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s