JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul class="menu">
			<li><a href="#">Разные вкусности</a>
				<ul>
					<li><a href="#">Суп с клёцками</a></li>
					<li><a href="#">Пироги с капустой и яйцом</a></li>
					<li><a href="#">Торт Медовый</a></li>
				</ul>
			</li>
			<li><a href="#">Узбекская кухня</a>
				<ul>
					<li><a href="#">Плов по-бухарски с изюмом</a></li>
					<li><a href="#">Плов с бараниной и нутом</a></li>
					<li><a href="#">Халва из ядрышек урюка</a></li>
					<li><a href="#">Лагман по-хорезмски</a></li>
				</ul>
			</li>
			<li><a href="#">Итальянская кухня</a>
				<ul>
					<li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li>
					<li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li>
					<li><a href="#">Кролик по-лигурийски с красным вином</a></li>
					<li><a href="#">Миндальные бискотти с медом</a></li>
				</ul>
			</li>
</ul>

CSS

.menu 	{
			background: -moz-linear-gradient(to top, #ecc, #fff8f8);
			background: -webkit-linear-gradient(to top, #ecc, #fff8f8);
			background: -o-linear-gradient(to top, #ecc, #fff8f8);
			background: -ms-linear-gradient(to top, #ecc, #fff8f8);
			background: linear-gradient(to top, #ecc, #fff8f8);
			border: 1px solid #c8c8c8; 
			border-top: 0;
			padding: 0; margin: 0;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 0;
		}
.menu > li
		{
			display: inline-block;
			border-right: 1px solid #fff;
			position: relative; 
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			font-size: 14px;
		}
.menu a
		{
			text-decoration: none;
			display: block;	
		}
.menu > li > a 
		{
			position: relative;
			color: #7c3c3c;
			border-right: 1px solid #cecece;
			padding: 10px 15px;	
			z-index: 1;
		}
.menu > li:hover > a  
		{
			color: #ca575b;
			background: -moz-linear-gradient(to top, #ffdede, #fff);
			background: -webkit-linear-gradient(to top, #ffdede, #fff);
			background: -o-linear-gradient(to top, #ffdede, #fff);
			background: -ms-linear-gradient(to top, #ffdede, #fff);			
			background: linear-gradient(to top, #ffdede, #fff);
			z-index: 3;
		}	
.menu ul
		{
			display: none;			
		}
.menu li:hover ul
		{
			display: block;
		}		
.menu ul
		{
			position: absolute;
			list-style: none;
			margin: 0; padding: 0;
#			width: 220px;
			background: -moz-linear-gradient(to bottom, #ffdede, #fff0f0);
			background: -webkit-linear-gradient(to bottom, #ffdede, #fff0f0);
			background: -o-linear-gradient(to bottom, #ffdede, #fff0f0);
			background: -ms-linear-gradient(to bottom, #ffdede, #fff0f0);
			background: linear-gradient(to bottom, #ffdede, #fff0f0);
			-webkit-border-radius: 0 0 7px 7px;
			-moz-border-radius: 0 0 7px 7px;
			border-radius: 0 0 7px 7px;
			padding: 3px;
			z-index: 2;
		}
.menu ul a
		{
			color: #ca575b;		
			padding: 5px 12px; 
		}
.menu ul a:hover
		{
			background: #8bc6ee;...