JSFiddle - React, Tailwind, and code Playground

HTML

<div class="alfavit">
            <ul>
                <li><span>А</span>
                    <ul>
                        <li><a href="#">арбуз</a></li>
                        <li><a href="#">арсенал</a></li>
                        <li><a href="#">анаконда</a></li>
                        <li><a href="#">абак</a></li>
                        <li><a href="#">арфа</a></li>
                        <li><a href="#">алфавит</a></li>
                    </ul>
                </li>
                <li><span>Б</span>
                    <ul>
                        <li><a href="#">арбуз</a></li>
                        <li><a href="#">арсенал</a></li>
                        <li><a href="#">анаконда</a></li>
                        <li><a href="#">абак</a></li>
                        <li><a href="#">арфа</a></li>
                       </ul>
                </li>
            </ul>
</div>

CSS

.alfavit ul{
list-style:none;
}

.alfavit li{
display:inline-block;
position:relative;
padding:0px 2px;
}
.alfavit li span{
text-decoration:underline;
cursor:pointer;
}

.alfavit li ul{
position:absolute;
top:19px;
left:-5px;
display:none;
font-size:12px;
background:#f7f7f9;
width:457px;
white-space: normal;
text-align:left;
box-shadow: 0 1px 3px #ccc;
 -moz-box-shadow: 0 1px 3px #ccc;
 -webkit-box-shadow: 0 1px 3px 2px #ccc;
}

.alfavit li:hover ul{
display:block;
}

.alfavit li ul li{
display:inline-block;
width:126px;
padding:0px;
}

.alfavit li ul li a{
display:block;
color:#000;
padding:3px 5px 3px 4px;
}

.alfavit li ul li a:hover{
background:#fff;
color:#ff0000;
}