JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlbook.ru</title>
	</head>
	<body>
		<header>
			<ul class="menu">
				<li class="tile tile-main active"><span><i class="icon icon-main"></i><br>Основное</span>
					<ul>
						<li><a href="#">Статьи</a></li>
						<li><a href="#">Блог</a></li>
						<li><a href="#">Практикум</a></li>
						<li><a href="#">Тесты</a></li>
						<li><a href="#">Форум</a></li>
					</ul>
				</li>
				<li class="tile tile-html"><span><i class="icon icon-html"></i><br>HTML</span>
					<ul>
						<li><a href="#">Самоучитель</a></li>
						<li><a href="#">Справочник</a></li>
						<li><a href="#">HTML5</a></li>
					</ul>
				</li>
				<li class="tile tile-css"><span><i class="icon icon-css"></i><br>CSS</span>
					<ul>
						<li><a href="#">Самоучитель</a></li>
						<li><a href="#">Справочник по CSS</a></li>
						<li><a href="#">Рецепты CSS</a></li>
					</ul>
				</li>
				<li class="tile tile-site"><span><i class="icon icon-site"></i><br>Сайт</span>
					<ul>
						<li><a href="#">Вёрстка веб-страниц</a></li>
						<li><a href="#">Макеты</a></li>
						<li><a href="#">Веб-сервер</a></li>
					</ul>
				</li>
			</ul>
		</header>
	</body>
</html>

CSS

body {
	margin: 0;
	font: 14px/1.2 Arial, sans-serif;
	min-width: 780px;
}


/* Header */

header {
	background: #555;
	display: block;
}

.logo {
	float: left;
	margin: 0 20px 0 15px;
}

.menu {
	position: relative;
}

.menu, .menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu > li {
	height: 66px;
	display: inline-block;
}

.menu ul {
	display: none;
	position: absolute;
	left: 0;
	top: 66px;
	padding: 5px 5px 5px 15px;
	box-sizing: border-box;
}

li.active ul {
	display: block;
}

.tile li {
	display: inline-block;
	margin-right: 20px;
}

.menu li ul {
	width: 100%;
}

.menu a {
	color: #fff;
	text-decoration: none;
}

.menu a:hover {
	text-decoration: underline;
}

.tile ul {
	text-align: left;
	z-index: 1;
	box-shadow: 0 0 10px 2px #666;
  position: absolute;
}

.tile {
	text-align: center;
	min-width: 70px;
}

.tile span {
	cursor: pointer;
	display: block;
	padding: 5px 10px;
}

.tile.active span {
	position: relative;
	z-index: 2;
}

.tile .icon {
	display: inline-block;
	margin-top: 3px;
	width: 32px;
	height: 32px;
}

.tile, .tile ul,.tile>span { background: #f3eddf; }
.tile.active,
.tile.active ul,.tile.active>span {
	background: #94BF23;
}

.icon-css {
	background-position: -32px 0;
} 

.icon-site {
	background-position: -64px 0;
}

.icon-main {
	background-position: -96px 0;
}
.tile>span {
  padding: 0px;
  margin: 0px;
  position: relative;
  top:0px;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 10;
}

JavaScript

$(document).ready(function() {
				$('.tile').click(function () {
					$('.tile ul').hide();
					$(this).children('ul').show();
					$('.tile').removeClass('active');;
					$(this).addClass('active');
				})
			})