JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
    <div class='popmnu'>
        <ul>
            <li><a href='1.html'>город 1</a></li>
            <li><a href='2.html'>город 2</a></li>
            <li><a href='1.html'>город 3</a></li>
            <li><a href='2.html'>город 4</a></li>
        </ul>
    </div>

    <img src='https://www.google.ru/logos/doodles/2015/42nd-anniversary-of-the-official-recognition-of-the-letter-5644871192805376.3-res.png' alt="image" />
    <div class='popmnu'>
        <ul>
            <li><a href='1.html'>город А</a></li>
            <li><a href='2.html'>город И</a></li>
            <li><a href='1.html'>город В</a></li>
            <li><a href='2.html'>город І</a></li>
        </ul>
    </div>
</div>

CSS

.content {
    position: relative }
    .content:hover .popmnu {
        display: block }
    .popmnu {
        z-index: 100;
        display: none;
        position: absolute;
        top: 41px;
        left: 0 }

/* Мусор */
.popmnu ul {
    width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 3px }
    .popmnu ul li a {
        display: block;
        text-decoration: none;
        color: black;
        transition: all 0.3s linear;
        border-bottom: 1px solid #ccc;
        padding: 10px 15px }
        .popmnu ul li a:hover {
            background: #ccc }