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