JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <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, .menu ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 .menu {
     background: linear-gradient(to bottom, #fff, #f1f2f2);
     /* Градиент */
     border: 1px solid #999;
     /* Параметры рамки */
     padding: 0 5px;
     /* Поля */
     font: 14px Arial, sans-serif;
     /* Параметры шрифта */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     /* Тень под меню */
 }
 .menu > li {
     display: inline-block;
     /* Выстраиваем по горизонтали */
     border-right: 1px solid #fff;
     /* Белая линия справа */
     position: relative;
 }
 .menu a {
     text-decoration: none;
     /* Убираем подчёркивание */
     color: #4c4c4c;
     /* Цвет ссылок */
     display: block;
     /* Блочные ссылки */
 }
 .menu > li > a {
     padding: 10px 15px;
     /* Поля */
     border-right: 1px solid #d8d8d8;
     /* Серая линия справа */
     position: relative;
     z-index: 3;
 }
 .menu ul {
     left: 0;
     display: none;
     position: absolute;
     width: 200px;
     background: #fff;
     box-shadow: 0 0 10px #666;
 }
 .menu ul a {
     padding: 5px 10px;
     display: block;
 }
 .menu ul a:hover {
     background: #008df2;
     color: #fff;
 }
 .menu > li:hover ul {
     display: block;
 }
 .menu > li:hover::before {
     content:'';
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     box-shadow: 0 5px 10px #666;
     position: absolute;
 }
 .menu > li:hover > a {
     background: #fff;
 }