JSFiddle - React, Tailwind, and code Playground

by Alexander Tewpin

HTML

<div class="column">
		<div class="line" id="demo-line">
			<div class="align-center">За</div>
			<div>&nbsp;</div>
			<div class="dropdown-group">
				<a class="link align-center" id="demo-link" href="#" >период</a>
				<div class="dropdown-menu" id="demo-dropdown">
					<a href="#" class="menu-item">Сегодня</a>
					<a href="#" class="menu-item">Вчера</a>
					<a href="#" class="menu-item">Неделю</a>
					<a href="#" class="menu-item">Месяц</a>
					<a href="#" class="menu-item">Год</a>
					<a href="#" class="menu-item">Все время</a>
					<a href="#" class="menu-item">Период</a>
				</div>
			</div>
			<div>&nbsp;</div>
			<div class="align-center">с</div>
			<div>&nbsp;</div>
			<div class="dropdown-group">
				<a class="link align-center" href="#" >10.12.14</a>
			</div>
			<div>&nbsp;</div>
			<div class="dropdown-group">	
				<a class="link align-center" href="#" >15:50</a>
			</div>
			<div>&nbsp;</div>
			<div class="align-center">по</div>
			<div>&nbsp;</div>
			<div class="dropdown-group">
				<a class="link align-center" href="#" >10.12.14</a>
			</div>
			<div>&nbsp;</div>
			<div class="dropdown-group">
				<a class="link align-center" href="#" >16:00</a>
			</div>
		</div>
		<div class="line">
			<div class="align-center">Вторая строка</div>
		</div>
		<div class="line">
			<div class="align-center">Еще какая-то строка</div>
		</div>
	</div>

CSS

html {
			font-family: Helvetica, Arial, sans-serif;
			font-size: 14px;
		}

		body {
			margin: 20px;
		}

		.column {
			background-color: #f2f2f2;
			width: 400px;
			height: 300px;
			padding: 15px 0px;
		}

		a {
			text-decoration: none;
			color: #03c;
			display: block;
		}

		a.hover-enabled:hover, a.item-selected {
			color: #c22;
		}

		.line {
			display: -webkit-flex;
			padding: 0px 20px;
		}

		.line.hover-enabled:hover, .line.line-selected {
			background-color: #ccc;
		}

		.align-center, .menu-item {
			height: 24px;
			display: -webkit-flex;
			-webkit-align-items: center;
		}
		
		.dropdown-group {
			position: relative;
		}

		.dropdown-menu {
			background-color: #f2f2f2;
			position: absolute;
			z-index: 100;
			left: -10px;
			padding: 5px 0px;
			border-radius: 5px;
			box-shadow:         0px 0px 1px 0px rgba(0,0,0,0.35), 0px 2px 15px 5px rgba(0,0,0,0.10), 0px 3px 5px 1px rgba(0,0,0,0.10);
		}

		.menu-item {
			padding: 0px 10px;
			white-space: nowrap;
			color: black;
		}

		.menu-item:hover {
			background-color: #ccc;
			color: black;
		}

JavaScript

var dropdown = $('#demo-dropdown');
		var link = $('#demo-link');
		var line = $('#demo-line');
		var html = $('html');
		var ll = $('.line, .link');
		var toggleDropdown = function () {
			dropdown.toggle();
			if (dropdown.is(":visible")) {
				link.addClass('item-selected');
				line.addClass('line-selected');
				ll.removeClass('hover-enabled');
			} else {
				link.removeClass('item-selected');
				line.removeClass('line-selected');
				ll.addClass('hover-enabled');
			};
		};
        
        ll.addClass('hover-enabled');
		dropdown.hide();
		toggleDropdown();
		link.on('click', toggleDropdown);