.region{
    cursor: pointer;
    position: relative;
    width: 100%;
    display: flex;
}
.region > a {
    margin-left: 5px;
}
.region:hover .select-city{
    opacity:1;
    transition: 0.5s linear;
    display: grid;
}
.region:not(:hover) .select-city{
    opacity:0;
    display: none;
    transition: 0.3s linear;
}
.select-city{
    top: 20px;
    max-height: 1100px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    position:absolute;
    opacity:1;
    z-index: 1000;
    background:#ffffff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
    padding: 12px;
    min-width: 80px;
    margin-left: 1px;
}
.select-city a{
    display: block;
    padding-bottom:5px;
}
.select-city :last-child {
    padding-bottom:0;
}