JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<ul class="parent">
        <li><span>первый</span></li>
        <li><span>второй</span>
            <ul class="child">
                <li>раз</li>
                <li>два</li>
                <li>три</li>
            </ul>
        </li>
        <li><span>третий</span></li>
        <li><span>второй</span>
            <ul class="child">
                <li>раз</li>
                <li>два</li>
                <li>три</li>
            </ul>
        </li>
        <li><span>пятый</span></li>
    </ul>

CSS

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

.parent{
margin:10px;
}
.parent>li{
position:relative;
display:inline-block;
text-align:center;
width:100px;
border:1px solid #ccc;
}

.parent>li:hover{
background:orange;
}

span{
display:block;
position:relative;
z-index:2;
}

.child{
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
padding-top:20px;
background:#888;
color:#fff;
z-index:1;
}

.parent>li:hover .child{
display:block;
}