body { background-color: #FFFFCC; margin: 0; }

.menu { margin: 2em 0.5em; }

.toggle { display: none; }

.option {
	position: relative;
	padding: 0.5em 0;
	border-bottom: solid 1px #999;
}

.title,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}

.title {
	padding-left: 2em;
	display: inline-block;
	color: #f33;
	font-size: 92%;
	cursor: pointer;
}
.title::after,
.title::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0.8em;
	width: 2px;
	height: 0.75em;
	background-color: #333;
	transition: all 0.3s;
}
.title::after {
	transform: rotate(90deg);
}

.content {
	max-height: 0;
	overflow: hidden;
}
.content ul {
	margin: 0;
	padding: 0 0 0 2em;
}
.content ul li {
	margin: 0;
	padding: 0.25em 0.5em;
	font-size: 90%;
	line-height: 1.5;
}

.toggle:checked + .title + .content {
	max-height: 500px;
	transition: all 1.5s;
}
.toggle:checked + .title::before {
	transform: rotate(90deg) !important;
}