JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Пункт 3, немногоa</a>
        <ul>
            <li><a href="#">Подпункт 1, тут побольше</a></li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
            <li><a href="#">Подпункт 4</a></li>
            <li><a href="#">Подпункт 5</a></li>
        </ul>
    </li>
</ul>

 <ul>
    <li>
        <a href="#">Пункт 3, нем</a>
        <ul>
            <li><a href="#">Подпункт 1, тут побольше</a></li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
            <li><a href="#">Подпункт 4</a></li>
            <li><a href="#">Подпункт 5</a></li>
        </ul>
    </li>
</ul>

CSS

ul{
    width:150px;
    float:left;
    border:1px solid green;
    
}
ul li{      
    position:relative;
    float:left; /*либо фиксированая ширина*/
}
ul li a{}
ul li ul{
    display:none;
    position:absolute; z-index: 2;
    top:100%; left:0; right:0; 
    width:auto;
    float:none;
    border:1px red solid;
}
ul:hover ul{display:block;}
ul li ul li{float:none;}