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);
      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::after
    {
      content: '';
      display: block;
      position: absolute;
      bottom: -24px;
      left: 0; right: 0; height: 0;
      border-bottom: 24px solid transparent; 
      cursor: default;
    }
 .menu ul
		{
			position: absolute;
			list-style: none;
			margin: 0; padding: 0;
      margin-top: 24px;      
			width: 100%;				/*задаём ширину равную родителю*/
			word-wrap: break-word; /*перенос слов*/
      background: linear-gradient(#ffe5e5, #fff6f6);
      border-radius:  8px 8px 8px 8px;
#     overflow: hidden;
		}
.menu > li > ul
    {
      display: none;
    }
.menu > li:hover > ul
    {
      display: block;
      z-index: 1;
    }
.menu ul li a
		{
			color: #ca575b;	
			padding: 5px 10px; 

		}
.menu ul li:hover a
		{
			background: #8bc6ee; 
			color: #fffcfc; 		
		}
.menu > li:hover, .menu ul
    {
			box-shadow: 0 0 4px #dd9a9a;      
    }
.menu ul li:first-child, .menu ul li:first-child a
    {
			border-radius: 8px 8px 0 0;
   ...