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>
              <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></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>
			<li><a href="#">Норвежская кухня</a>
				<ul>
          <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>
            </ul>
          </li>
					<li><a href="#">Скандинавские бублики с кардамоном</a></li>
				</ul>
			</li>
      </ul>
      <p>
          Да здравствует, Африка!
      </p>

CSS

p
      {
        color: #555;
      }
.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; 
			-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);
      hyphens: auto;
			font-size: 0;													/*для того, чтоб между двумя пунктами меню не добавлялся пробел*/
		}
.menu > li
		{
		  display: inline-block; 
      width: 25%;
      box-sizing: border-box;
			border-left: 1px solid #fff;
			position: relative;
      vertical-align: top;
		}
.menu a
		{
			text-decoration: none;
			display: block;	
			font-size: 14px;	/*возвращает исходный размер шрифта*/
		}
.menu > li > a 
		{
			position: relative;
			color: #7c3c3c;
		}
.menu > li:hover > a  
		{
			color: #ca575b;
			background: linear-gradient(to top, #ffdede, #fff);
      z-index: 2; /*выделенное главное меню, перекрывает тень от выпадающего меню*/
		}
.menu > li
		{
			border-left: 1px solid #cecece;
		} 
.menu > li > a
		{
      border-left: 1px solid #fff;
		}
.menu > li > a, .menu > li:first-child:hover > a
		{
      padding: 10px 15px;
		}    
.menu > li:hover, .menu > li:first-child, .menu > li:hover > a, .menu > li:first-child > a, .menu > li:hover + li, .menu > li:hover + li > a
    {
      border-left: none;
    }
.menu > li:hover > a, .menu > li:hover + li > a  
		{
			padding: 10px 15px 10px 17px;			
		}
.menu > li > ul
		{
			position: absolute;
			display: none;	
			list-style: none;
			margin: 0; padding: 0;
			background: linear-gradient(to bottom, #ffdede, #fff0f0);
			width: 100%;				/*задаём ширину равную родителю*/
			word-wrap: break-word; /*перенос слов*/
      z-index: 1; /*ниспадающее меню должно быть выше невыделенного главного меню, чтоб если меню будет в две и более строчки, ниспадающее меню располагалось поверх всего того, что оно перекрывает, а там...