Expanding accordion menu (ex-mootols homepage accordion)

dabblet.css

/**
 * Expanding accordion menu (ex-mootols homepage accordion)
 */

@import url(http://fonts.googleapis.com/css?family=Magra:700);

* { transition: all 0.5s ease;}


html, body {
	margin:0;
	padding:20px;
	min-height: 100%;
}

body {
	background-color: hsl(0,0%,18%);
	background-size: 3px 3px;
	background-image:linear-gradient(  0deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 3px),linear-gradient( 90deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 5px),
			 radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),	repeating-radial-gradient( #666 0px, black 2px, black 48px);
}

nav {
	width:100%;
	display:block;
	margin-bottom: 100px !important;
}

#smallexample {
	width:500px;
	display:block;
}



.pseudo-accordion {
	margin: 0;
	padding:0;
	list-style: none;
	display: box !important;
	box-orient: horizontal;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.pseudo-accordion li,
.pseudo-accordion .pseudo-accordion-element {
	display: block;
	box-flex: 1;
	text-align: center;
	position: relative;
	border:none;
	outline:none;
	box-shadow: inset 0px 2px 3px 2px #222, inset 1px 1px 2px 1px #555;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.2em;
	background-image: linear-gradient(top, rgba(174,188,191,0.3) 0%,rgba(110,119,116,0.3) 50%,rgba(10,14,10,0.3) 51%,rgba(10,8,9,0.3) 100%);
}

.pseudo-accordion a {
	display: block;
}

.pseudo-accordion li,
.pseudo-accordion .pseudo-accordion-element,
.pseudo-accordion a {
	text-decoration: none;
	font-family: 'Magra',Tahoma, Helvetica, Arial, Sans-Serif;
	color: #222;
	text-shadow: 0px 2px 3px #999, 0px 0px 2px 3px #999, 0px -1px -1px 3px #999;
}

.pseudo-accordion li:hover,
.pseudo-accordion .pseudo-accordion-element:hover
 {
	padding-left: 20%;
	padding-right: 20%;
	z-index: 10;
}

.pseudo-accordion li:not(:first-child):hover:before,
.pseudo-accordion .pseudo-accordion-element:not(:first-child):hover:before
 {
 	content: '\AB';
	border-radius-left: 1em;
	position: absolute;
	left:-1em;
	top:50%;
	height: 1.2em;
	width: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: -1.5em;
	color: #222;
	z-index: 20;
	box-shadow: inset 6px 0px 3px 2px #222, inset 5px 0px 2px 1px #555;
	border-radius: 0.5em;
	background-image: linear-gradient(top, rgba(174,188,191,0.3) 0%,rgba(110,119,116,0.3) 50%,rgba(10,14,10,0.3) 51%,rgba(10,8,9,0.3) 100%);
	background-size: 3em 3m;
	background-repeat: repeat-x;
	background-position: 0 -0.11em;
}

.pseudo-accordion li:not(:last-child):hover:after,
.pseudo-accordion .pseudo-accordion-element:not(:last-child):hover:after
 {
 	content: '\BB';
	border-radius-left: 1em;
	position: absolute;
	right:-1em;
	top:50%;
	height: 1.2em;
	width: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: -1.5em;
	color: #222;
	z-index: 20;
	box-shadow: inset -6px 0px 3px 2px #222, inset -5px 0px 2px 1px #555;
	border-radius: 0.5em;
	background-image: linear-gradient(top, rgba(174,188,191,0.3) 0%,rgba(110,119,116,0.3) 50%,rgba(10,14,10,0.3) 51%,rgba(10,8,9,0.3) 100%);
	background-size: 3em 3m;
	background-repeat: repeat-x;
	background-position: 0 -0.11em;
}

.pseudo-accordion li:hover,
.pseudo-accordion .pseudo-accordion-element:hover,
.pseudo-accordion li:hover a,
.pseudo-accordion .pseudo-accordion-element:hover a
 {
	color: #444;
	text-shadow: 0px 2px 3px #999, 0px 0px 2px 3px #aaa, 0px -1px -1px 3px #fff;
}

.first, 
.first:before, 
.first:after
 {
	background-color: #556270;
}

.second, 
.second:before, 
.second:after{
	background-color: #4ECDC4;
}

.third, 
.third:before, 
.third:after{
	background-color: #C7F464;
}

.fourth, 
.fourth:before, 
.fourth:after{
	background-color: #FF6B6B;
}

.fifth, 
.fifth:before, 
.fifth:after{
	background-color: #C44D58;
}

dabblet.html

<nav>
	<ul class="pseudo-accordion">
		<li class="first"><a href="#first">First</a></li>
		<li class="second"><a href="#second">Second</a></li>
		<li class="third"><a href="#third">Third</a></li>
		<li class="fourth"><a href="#fourth">Fourth</a></li>
		<li class="fifth"><a href="#fifth">Fifth</a></li>
	</ul>
</nav>



<aside class="pseudo-accordion" id="smallexample">
	<article class="pseudo-accordion-element first">
		First
	</article>
	<article class="pseudo-accordion-element second">
		Second
	</article>
</aside >

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"css"}