JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<ul>
            <li><span>раз</span>
                <div>блок с текстом</div>
            </li>
            <li><span>два</span>
                <div>блок с текстом</div>
            </li>
            <li><span>три</span>
                <div>блок с текстом</div>
            </li>
        </ul>

CSS

ul{
    margin: 20px;
    list-style: none;
}

li{
    display: inline-block;
    position: relative;
    padding-top: 1px;
    border: 1px solid transparent;
}

span{
    position: relative;
    display: block;
    padding: 5px 20px;
    height: 20px;
    border-bottom: 1px solid transparent;
    z-index: 99;
}

div{
    display: none;
    position: absolute;
    top: 31px;
    left: -1px;
    padding: 20px;
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}

li:hover{
    border: 1px solid #000;
    border-bottom: 1px solid transparent;
}

li:hover span{

    border-bottom: 1px solid #fff;
}

li:hover div{
    display: block;
}