JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
            <li><a href="#" style="color: #000;">первый</a>
                <div class="sub"><div>
                <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>
                </div></div>
            </li>
            <li><a href="">второй вообще большой</a>
                <div class="sub"><div>
                <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>
                   <li><a href="">раз</a></li>

                </ul>
                </div></div>
            </li>
            <li><a href="">второй вообще большой</a>
                <div class="sub"><div>
                <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>
                   <li><a href="">раз</a></li>

                </ul>
                </div></div>
            </li>
            <li><a href="">второй вообще большой</a>
                <div class="sub"><div>
                <ul>
                   <li><a href="">раз</a></li>
                   <li><a href="">два</a></li>



                </ul>
                </div></div>
            </li>
            
            
            
            <li><a href="">третий</a>
                <div class="sub"><div>
                <ul>
                   <li><a href="">раз</a></li>
 ...

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 { position: relative; background: red; margin: 0 1px; height: 30px; display: inline-block; vertical-align: top;}
        
        .menu .sub { display: none;  text-align: center; position: absolute; top: 30px; left: 0; width: 100%; height: 30px; }
        .menu .sub > div { float: left; left: 50%; position: relative; }
            .menu .sub ul  { white-space: nowrap; float: left; left: -50%; position: relative; }
            
            .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 .sub { display: block;}
    .menu  li:first-child .sub > div{   float: left; left: 0;}
    .menu  li:first-child .sub > div ul {   float: left; left: 0;}
    .menu  li:last-child .sub > div{  float: right; left: 0;}
    .menu  li:last-child .sub > div ul {  float:  right; left: 0;}