JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li class="head"><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  class="head"><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 li {display: inline-block;list-style: none;position: relative;}
.menu li.head {margin: 15px;padding: 5px;float: left;}
.menu li.head a {padding: 0 5px;}
/*SPOILER*/
.menu li ul {display: none;}
.menu li:hover ul {display: block;position: absolute;margin: 5px 0 0 -5px;padding: 0;box-shadow: 0 0 4px #666;}
.menu li:hover ul li {width: 130px;padding: 0 3px;}
.menu li:hover ul li:first-child {padding-top: 5px;}
.menu li:hover ul li:last-child {padding-bottom: 5px;}
.menu li:hover ul li a {text-decoration: none;padding: 0 5px;line-height: 25px;color: blue !important;}
.menu li:hover ul li a:hover {display: block; background: #2ECCFA;color: #fff !important;}
.menu li.head a:hover, .menu li.head:hover a {color: #000;display: block;text-decoration: none;}
.menu li.head:hover {border-radius: 5px 5px 0 0;position: relative;box-shadow: 0 0 4px #666;}

.menu li.head:hover::after {
    content: '';
    display:block;
    position:absolute;
    top:22px;
    bottom:-5px;
    left:0px;
    right:0px;
    background: #fff;
}