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; 
			-webkit-border-radius: 0 0 5px 5px;
			-moz-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 3px 5px rgba(180,180,220,0.2);
			font-size: 0;
		}
.menu > li
		{
			display: inline-block; 			/*строчно-блочные элементы, изнутри они как блоки, а снаружи удобно следуют друг за другом, как большие символы*/
			vertical-align: top;			/*а иначе при открытии подменю соседнии символы сползают вниз, а так - остаются на верхней строчке*/
			width: 50%;						/*что и логично для двух колоночного макета*/
			border-right: 1px solid #fff;	/*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/
		}
.menu > li:hover
		{
			border-right: none;				/*убрать белую линию нужно для того, чтоб иметь возможность полностью выделять пункты подменю. поскольку линия относится к меню, а в раскрытом меню, нужно выделять ещё подменю, то если линию оставить, то она будет маячить на всех пунктах подменю, и при их выделении нам её убрать будет сложно */
		}
.menu a
		{
			text-decoration: none;
			display: block;	
			text-align: center;				/*делаем текст в колонках по центру*/
			font-size: 14px;
			border-right: 1px solid #cecece;	/*серая линия в конце блока. вместе с белой линией тега <li> образует бело-серую линию*/
		}
.menu > li:hover  a
		{
			border-right: none;			/*убираем также и серую линию у выделенного пункта. вместо бело-серой линии - тень*/
		}
.menu > li > a 
		{
			color: #7c3c3c;
			padding: 10px 15px;	
		}
.menu > li:hover > a  
		{
			color: #ca575b;
			background: linear-gradient(to top, #ffdede, #fff);
		}
.menu > li:hover	 /*скругляем углы и убираем с поля зрения всё что не влазяет у дочерних элементов*/								
		{
			-webkit-border-radius: 5px 5px 5px 5px;
			-moz-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px...