JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content'>
    <img src='#' alt='Картинка' />
    <ul class='menu'>
        <li><a href='#'>Город 1</a></li>
        <li><a href='#'>Город 2</a></li>
    </ul>
</div>

CSS

.content {
    display: inline-block;
    position: relative }
    .content:hover .menu {
        display: flex }
    .content img {
        display: block;
        width: 140px;
        height: 100px;
        border: 1px solid #ccc }
    .content .menu {
        display: none;
        flex-wrap: wrap;
        align-content: center;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        list-style: none }
    .content .menu li {
        display: block;
        flex: 0 0 100%;
        text-align: center }