CSS and Jquery Onclick Menu

Have a look at this cool CSS and Jquery Onclick Menu. This simple and clean look menu gives your website a standard look and feel. just copy and paste the code or download fileused in this example to embed this menu to your website

CSS CODE

.click-menu
{
 font-family:Arial, Helvetica, sans-serif;
}
.click-menu a.click-link
{
 display:inline-block;
 background:#eee;
 font-size:14px;
 text-decoration:none;
 color:#333;
 padding:10px 80px;
 border:solid 1px #ccc;
}
.click-menu .click-menu-drop-down{display:none;}
.click-menu ul
{
display:table;
position:relative;
list-style:none;
margin:20px 0px 0px 0px;
padding:0px;
box-shadow:0px 0px 10px #ccc;
}
.click-menu ul li a
{
 background:#eee;
 display:block;
 padding:10px 63px;
 border:solid 1px #ccc;
 border-bottom:none;
 color:#666;
 text-decoration:none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 
}
.click-menu ul li a:hover
{
 background:#d9d8d8;
}
.click-menu ul li:last-child a{border-bottom:solid 1px #ccc;}
.click-menu ul:after, .click-menu ul:before {
 bottom: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.click-menu ul:after {
 border-color: rgba(136, 183, 213, 0);
 border-bottom-color: #eee;
 border-width: 10px;
 margin-left: -10px;
}
.click-menu ul:before {
 border-color: rgba(194, 225, 245, 0);
 border-bottom-color: #d9d8d8;
 border-width: 12px;
 margin-left: -12px;
}

JQUERY CODE

HTML CODE

Click Me




Menu Option 1
Menu Option 2
Menu Option 3
Menu Option 4
Menu Option 5

Download File Used in this example View Live Demo

Total Downloads: