JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul>
        <li>Hover Me
            <ul class="lvl1">
                <li>TEST</li>
                <li>TEST</li>
                <li>TEST</li>
                <li>TEST</li>
                <li>TEST</li>
                <li>TEST</li>
                <li>TEST</li>
            </ul>
        </li>
    </ul>
    
</div>

CSS

li{
    list-style:none;
}
.wrapper{
    position:relative;
    width:150px;
    height:300px;
}
.wrapper>ul{
    position:absolute;
    background-color:blue;
    width:100%;
    height:100%;
    color:#FFFFFF;
}

.lvl1{
    position:absolute;
    left:100%;
    top:0;
    min-width:100%;
    height:100%;
    background-color:green;
}
.lvl1 li{
    padding: 20px 0px;
    color:red;
}