Creando una lista desplegable con imágenes - Dropdown

Para crear una lista desplegable como esta:

Debemos tener crear primera una serie de clases en CSS

.dropdown {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
}
.dropdown .flag{
    display: inline-block;
    height: 35px;
    padding: 0 0.5rem 0 0;
}
.dropdown .text{
    display: inline-block; height: 35px;
}
.dropdown-content{
    display: none;
    position: absolute;min-width: 200px;
    background-color: #f9f9f9; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001;
}
.dropdown-content a{
    color: black;
    padding: 1rem 1.2rem;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover{
    background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    display: block;
}

Y luego la estructura en el HTML

<div class="dropdown">
   <div class="flag"><img src="imagen1.png" alt="" /></div>
   <div class="text">Texto 1</div>
   <div class="dropdown-content">
      <a>
         <div class="flag"><img src="imagen2.png"/></div>
         <div class="text">Texto 2</div>
      </a> 
      <a>
         <div class="flag"><img src="imagen3.png"/></div>
         <div class="text">Texto 3</div>
      </a>  
      <a>
         <div class="flag"><img src="imagen4.png"/></div>
         <div class="text">Texto 4</div>
      </a>                          
   </div>
</div>