CSS and Jquery Onclick Menu
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div class="click-menu">
<div class="click-link">Click Me</div>
<div class="click-menu-drop-down">
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
<li><a href="#">Menu Option 4</a></li>
<li><a href="#">Menu Option 5</a></li>
</ul>
</div>
</div>
CSS
.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;
}
JavaScript
$(document).ready(function(e) {
$('.click-menu').click(function(){
$(this).parent().find('.click-menu-drop-down').slideToggle();
});
});