JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <ul class="menu">
            <li><a href="">первый</a>
                <ul class="sub">
                    <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 class="sub">
                    <li><a href="">раз</a></li>
                    <li><a href="">два</a></li>
                    <li><a href="">три</a></li>
                </ul>
            </li>
            <li><a href="">третий</a>
                <ul class="sub2">
                    <li><a href="">раз</a></li>
                    <li><a href="">два</a></li>
                    <li><a href="">три</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

.wrap{
width:600px;
height:100px;
margin:0px auto;
overflow:hidden;
border:1px solid #ccc;
}

li a{
display:block;
text-decoration:none;
color:#000;
padding:15px;
}

li a:hover{
color:#fff;
}

ul{
margin:0;
padding:0;
list-style:none;
font-size:0px;
}


.menu li{
display:inline-block;
background:red;
color:#000;
position:relative;
font-size:14px;
}

.menu li:hover{
background:blue;
color:#fff;
}

.sub, .sub2{
display:none;
position:absolute;
top:47px;
min-width:600px;
border-top:1px solid #fff;
}

.menu li:hover .sub{
display:block;
text-align:left;
}

.menu li:hover .sub2{
display:block;
right:0px;
text-align:right;
}