JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul class="menu" lang="ru">
			<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>
				</ul>
			</li>
			<li><a href="#">Немецкая кухня</a>
				<ul>
					<li><a href="#">Гусь по-берлински</a></li>
					<li><a href="#">Пирог яблочный с грецкими орехами</a></li>
					<li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li>
				</ul>
			</li>
</ul>
<div lang="ru" class="text">
  <span>Да здравствует, Африка</span>
</div>

CSS

.menu
    {
			background: linear-gradient(to top, #ecc, #fff8f8);
			border: 1px solid #c8c8c8; 
			border-top: 0;
			padding: 0;
      margin: 0;
			font-family: Arial, Helvetica, sans-serif; 
			border-radius: 0 0 5px 5px;
			box-shadow: 0 3px 5px rgba(180,180,220,0.2);
			word-wrap: break-word;    /*перенос слов*/
      hyphens: auto;    /*правила переноса. к сожалению, не работает, например, в хроме, работает в мозиле*/
			font-size: 0;													/*для того, чтоб между двумя пунктами меню не добавлялся пробел*/
		}
.menu > li
		{
			display: inline-block; 		
			border-right: 1px solid #fff;
			position: relative; 
			font-size: 14px;	/*возвращает исходный размер шрифта*/
      box-sizing: border-box;
    }
 .menu > li:hover 
		{
			border-right: none;
		}
.menu a
		{
			text-decoration: none;
			display: block;	
		}
.menu > li > a 
		{
			color: #7c3c3c;
			border-right: 1px solid #cecece;
			padding: 10px 15px;	
      box-sizing: border-box;
		}
 .menu > li:hover > a  
		{
			color: #ca575b;
			background: linear-gradient(to top, #ffdede, #fff);
			padding: 10px 17px 10px 15px;	/*компенируем ширину исчезающих боковых линий*/      
			border-right: none;	
		}
.menu > li:hover::before
    {
      content: '';
      display: block;
      position: absolute;
      bottom: -26px; /*рассчитаная высота видимой стороны ромбика + два пикселя на тень*/
      left: 0; right: 0; height: 0;
      border-bottom: 26px solid transparent; 
      cursor: default;
    }
.menu > li:hover::after
    {
      content: '';
      display: block;
      position: absolute;
      bottom: -31px;  /*сдвигаем на высоту элемента минус два пикселя для того чтоб тень выходила красиво*/
      left: calc(50% - 15px);  /*центрирование элемента*/
      width: 30px;
      height: 29px;    /*при наклоне исходного прямоугольника на 16 градусов, мы удлиняем его боковую (вертикальную) сторону, поскольку высота элемента остаётся постоянной. Боковая же сторона, удлиняясь, становится равной ширине,...