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>
                    <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="">три</a></li>
                </ul>
            </li>
        </ul>

CSS

* { margin: 0; padding: 0;}
.wrap { }
.menu {
margin:0;
padding:0;
list-style:none;
font-size:0px;
position:relative;
height: 30px;
display: inline-block;


}
    .menu > li { width: 100px;background: red; margin: 0 1px; height: 30px; float: left;}
        .menu ul { display: none;  text-align: center; position: absolute; top: 30px; left: 0; width: 100%; height: 30px; }
            .menu ul li { margin: 0 1px; width: 30px;  display: inline-block;  height: 30px;}
                .menu ul li a { color: #000; margin: 0 1px; display: block; background: blue; height: 30px;}
    .menu > li:hover ul { display: block;}
    .menu  li:first-child ul { text-align: left;}
    .menu  li:last-child ul { text-align: right;}