Accordion Menu

body {
	padding:0;
	margin:0;
}
h1 {
	font-family:'Century Gothic';
	margin:30px auto 30px auto;
	color:#09fbd2;
	width:100%;
	text-align:center;
}
ul.menu {
	padding:0;
	list-style:none;
	width:400px;
	margin:20px auto;
	font-family:'Century Gothic';
	box-shadow:0px 0px 25px #00000070;
	clear:both;
	display:table;
}
ul.menu .list {
	font-size:14px;
	border-bottom:1px solid #324252;
	position:relative;
	width:100%;
	box-sizing:border-box;
	height:50px;
	vertical-align:sub;
	background:#3e5165;
	clear:both;
}
ul.menu .list:after {
	content:"+";
	font-family:FontAwesome;
	position:absolute;
	right:17px; 
	top:17px;
	padding:0px 5px;
	color:#fff; 
}
ul.menu .list:before {
	content:'-';
	font-family:FontAwesome;
	position:absolute;
	left:17px;
	top:17px;
	padding:0px 5px;
	color:#fff;
}
ul.menu .list a {
	text-decoration:none;
	color:#fff;
	padding:17px 0px 17px 45px;
	display:block;
	height:100%;
	box-sizing:border-box;
}
ul.menu .list a:hover {
	background-color:#324252;
	transition:300ms all;
	color:#09fbd2;
}
ul.menu .list .items {
	height:0px;
	overflow:hidden;
}
ul.menu .list .items a {
	padding:17px;
}
ul.menu .list .items a:hover {
	background-color:#3f5d79;
	color:#fff;
	transition:300ms all;
}
ul.menu .list:last-child {
	border-bottom:none;
}
ul.menu .active:after {
	content:"\f106";
	font-family:FontAwesome;
	position:absolute;
	right:17px;
	top:17px;
	padding:0px 5px;
	color:#fff;
}
ul.menu .active:before {
	content:'\f07c';
	font-family:FontAwesome;
	position:absolute;
	left:17px;
	top:17px;
	padding:0px 5px;
	color:#fff;
}
ul.menu .active > .items {
	display:block;
	background:#23313f;
	padding:0px;
	height:auto;
	color:#fff;
	transition-timing-function:cubic-bezier(0.075,0.82,0.165,1);
	transition:all 200ms;
	clear:both;
	float:left;
	width:100%;
}
ul.menu .active > .items li {
	padding:0px;
	border-bottom:1px solid #324252;
	list-style:none;
}
ul.menu .active > .items li:last-child {
	border-color:transparent;
	padding-bottom:0px;
}
ul.menu .active > .items .active > .items {
	background-color:#2f4b67;
}
ul.menu .active > a {
	color:#46efa4;
	text-transform:uppercase;
	font-weight:bold;
}
ul.menu .active .list {
	background:#697d92;
}
ul.menu .active .list a {
	padding:17px 0px 17px 45px;
}