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>
			<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: linear-gradient(to bottom, #ecc, #fff8f8);
			border: 1px solid #c8c8c8; 
			border-top: 0;
			padding: 0; margin: 0;
			font-family: Arial, Helvetica, sans-serif; 
			border-radius: 0 0 10px 10px;
			box-shadow: 0 3px 5px rgba(180,180,220,0.2);
			font-size: 0;
		}
.menu > li
		{
			vertical-align: top;
            display: inline-block; 		
			width: 50%;		
			font-size: 14px;
            position: relative;
		}
.menu a
		{
			text-decoration: none;
			display: block;	
			text-align: center;		
			font-size: 14px;
		}
.menu > li > a 
		{
			color: #7c3c3c;
			padding: 10px 15px;	
		}
.menu > li:hover > a  
		{
			color: #ca575b;
			background: linear-gradient(to top, #ffdede, #fff);
		}
.menu > li:hover				
		{
			border-radius: 10px 10px 10px 10px;	
		}

.menu > li:hover > a				
		{
			border-radius: 10px 10px 0 0;	
		}
.menu > li:hover ul				
		{
			border-radius: 0 0 10px 10px;
            overflow: hidden;
		}
.menu > li:nth-child(2n+1):after
        {
            content: '';
            display: block;
            width: 10%;
            right: -5%;
            top: 0;
            height: 100%;
            background: linear-gradient(to right, #dab 25%, #ebc 50%, #fde 75%, #ffedf5 50%);
            position: absolute;
            z-index: 2;
        }
.menu > li:nth-child(2n):hover:after
        {
            content: '';
            display: block;
            width: 10%;
            left: -5%;
            top: 0;
            height: 100%;
            background: linear-gradient(to right, #dab 25%, #ebc 50%, #fde 75%, #ffedf5 50%);
            position: absolute;
            z-index: 10;
        }
.menu ul
		{
			list-style: none;
			margin: 0; padding: 0;
			background: linear-gradient(to bottom, #ffdede, #fff0f0);
		}
.menu ul a
		{
			color: #ca575b;		
			padding: 5px 10px; 
		}
.menu ul a:hover
		{
			background: #8bc6ee; 
			color: #fffcfc; 
		}
.menu li ul
		{
			display: none;
		}
.menu li:hover ul
		{
			display: block; /*...