JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ul1">maccccccccccccccccccccccccccccccccccccccinddddddddddddddddddddddddddddddddddddddddddddddddddd
    <li><!--reproduced structure-->
        <ul> <!--reproduced structure--> 
            
            <li class="li1">li
                <div >div in li</div>
            </li>
            
        </ul>
    </li> 
</ul>

CSS

#ul1 {
    width: 400px;
    height: 100px;
    background-color: #999;
    position: relative;
    owerflow: hidden;
}
.li1 {
    width: 200px;
    height: 50px;
    background-color: #666;
    position: absolute;
} 
.li1 div {
    display: block;
    width: 400px;
    height: 200px;
    background-color: #006;
    position: absolute;
    top: 100%;
    left: 50%;
}