Clickable Menu only with css

HTML

							
							
<nav class="clickable-menu">  
	<div data-title="Menu 1" tabindex="0">
	  <ul>
		<li><a href="#">menu 1 1</a></li>
		<li><a href="#">menu 1 2</a></li>
		<li><a href="#">menu 1 3</a></li>
	  </ul>
	</div>
	<div data-title="Menu 2" tabindex="1">
	  <ul>
		<li><a href="#">menu 2 1</a></li>
		<li><a href="#">menu 2 2</a></li>
	  </ul>
	</div>
	<div data-title="Menu 3" tabindex="2">
	  <ul>
		<li><a href="#">menu 3 1</a></li>
		<li><a href="#">menu 3 2</a></li>
		<li><a href="#">menu 3 3</a></li>
	  </ul> 
	</div>
</nav>

CSS

							
							
.clickable-menu {
	background-color: #F5F5F5;
}
.clickable-menu ul {
	margin: 0;
	padding: 10px;
	list-style: none;
}
.clickable-menu div {
	display: inline-block;
	height: 40px;
	background-color: #F5F5F5;
	padding: 10px;
	position: relative;
	outline: none;
	color: #666666;
	cursor: pointer;
}
.clickable-menu div:before {
	content: attr(data-title);
}
.clickable-menu div ul {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	background-color: #a25f5e;
	color: white;
	min-width: 150px;
}
.clickable-menu ul li {
	line-height: 1.5;
}
.clickable-menu ul li a {
	text-decoration: none;
	color: #F5F5F5;
}
.clickable-menu ul li a:hover {
	color: #ccc;
}
.clickable-menu div:hover {
	color: #a25f5e;
}
.clickable-menu div:focus {
	color: #FFF;
	background-color: #a25f5e;
}
.clickable-menu div:focus ul {
	display: block;
}