<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gallery</title>
<link href="" rel="stylesheet">
</head>
<body>
<div class="accordionMenu">
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>Loren ipsum dolar...</p>
</div>
<div class="menuSection" id="promotion">
<h2><a href="#promotion">Promotion</a></h2>
<p>Loren ipsum dolar sit amet...</p>
</div>
<div class="menuSection" id="event">
<h2><a href="#Event">Event</a></h2>
<p>Loren ipsum dolar sit amet...</p>
</div>
</div>
</body>
<style type="text/css">
.accordionMenu {
background: #fff;
color:#424242;
font:12px Arial,Verdana,sans-serif;
margin:0 auto;
padding:10px;
width:500px;
}
.accordionMenu h2 {
padding:0;
margin:5px,0;
position:relative;
}
.accordionMenu h2:before {
border: 5px solid #fff;
border-color: #000 transparent transparent;
content:"";
height:0;
position:absolute;
right:10px;
top:15px;
width:0px;
}
.accordionMenu h2 a {
background: #8f8f8f;
background: linear-gradient(top,#cecece,#8f8f8f);
background: -moz-linear-gradient(top,#cecece,#8f8f8f);
background: -webkit-linear-gradient(top,#cecece,#8f8f8f);
background: -o-linear-gradient(top,#cecece,#8f8f8f);
background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
border-radius:5px;
color:#424242;
display:block;
font-size:13px;
font-weight:normal;
margin:0;
padding:10px 10px;
text-shadow: 5px 5px 10px #aeaeae;
text-decoration:none;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #2288dd;
background: linear-gradient(top,#6bb2ff,#2288dd);
background: -moz-linear-gradient(top,#6bb2ff,#2288dd);
background: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
background: -o-linear-gradient(top,#6bb2ff,#2288dd);
background: -webkit-gradient(linear,left top,left bottom,from(#6bb2ff),to(#2288dd));
color:#FFF;
}
.accordionMenu p {
margin:0;
height:0px;
overflow: hidden;
padding:0 10px;
-moz-transiton:height 0.5s ease-in;
-webkit-transiton:height 0.5s ease-in;
-o-transiton:height 0.5s ease-in;
transiton:height 0.5s ease-in;
}
.accordionMenu :target p {
height:100px;
overflow: auto
}
.accordionMenu :target h2:before {
border-color:transparent transparent transparent #fff;
}
</style>
</html>
