JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
            <li><a href="#" style="color: #000;">первый</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

.menu {
margin:0;
padding:0;


position:relative;
height: 30px;
display: inline-block;


}
.menu  a {color: #000; margin: 0 1px; display: block; height: 30px;}
    .menu > li { background: red; margin: 0 1px; height: 30px; display: inline-block; vertical-align: top;}
        .menu ul {  display: none;  text-align: center; position: absolute; top: 30px; left: 0; width: 100%; height: 30px; }
            .menu ul li { margin: 0 1px;   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;}