.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  
  border-radius: 15px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 100;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.flag-img{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 1px 2px rgb(237 226 226);
}

.flag-row a{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1.4em;
  font-weight: bolder;
  color: darkslateblue;
}

.flag-img {
  margin-right: 10px;
}

.flag-en {
  background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJmbGFnLWljb25zLWdiIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPHBhdGggZmlsbD0iIzAxMjE2OSIgZD0iTTAgMGg1MTJ2NTEySDB6Ii8+CiAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTUxMiAwdjY0TDMyMiAyNTZsMTkwIDE4N3Y2OWgtNjdMMjU0IDMyNCA2OCA1MTJIMHYtNjhsMTg2LTE4N0wwIDc0VjBoNjJsMTkyIDE4OEw0NDAgMHoiLz4KICA8cGF0aCBmaWxsPSIjQzgxMDJFIiBkPSJtMTg0IDMyNCAxMSAzNEw0MiA1MTJIMHYtM3ptMTI0LTEyIDU0IDggMTUwIDE0N3Y0NXpNNTEyIDAgMzIwIDE5NmwtNC00NEw0NjYgMHpNMCAxbDE5MyAxODktNTktOEwwIDQ5eiIvPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNzYgMHY1MTJoMTYwVjB6TTAgMTc2djE2MGg1MTJWMTc2eiIvPgogIDxwYXRoIGZpbGw9IiNDODEwMkUiIGQ9Ik0wIDIwOHY5Nmg1MTJ2LTk2ek0yMDggMHY1MTJoOTZWMHoiLz4KPC9zdmc+Cg==');
  background-size: cover;
  background-position: center center;
}

.flag-hk {
  background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iZmxhZy1pY29ucy1oayIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxwYXRoIGZpbGw9IiNFQzFCMkUiIGQ9Ik0wIDBoNTEydjUxMkgwIi8+CiAgPHBhdGggaWQ9ImhrLWEiIGZpbGw9IiNmZmYiIGQ9Ik0yODIuMyAxMTkuMkMyMDMgMTE0IDE2Ni42IDIxOCAyNDEuNiAyNTYuNCAyMTUuNiAyMzQgMjIxIDIwMSAyMzEuNSAxODRsMS45IDFjLTEzLjggMjMuNi0xMS4yIDUyLjggMTEgNzEtMTIuNi0xMi4yLTkuNC0zOSAxMi4yLTQ4LjhzMjMuNi0zOS4zIDE2LjQtNDkuMXEtMTQuNy0yNS42IDkuMy0zOXpNMjQzLjkgMTgwbC00LjcgNy40LTEuOC04LjYtOC42LTIuMyA3LjgtNC4zLS42LTkgNi41IDYuMiA4LjMtMy4zLTMuNyA4IDUuNiA2Ljl6Ii8+CiAgPHVzZSB4bGluazpocmVmPSIjaGstYSIgdHJhbnNmb3JtPSJyb3RhdGUoNzIgMjQ4LjUgMjU5LjUpIi8+CiAgPHVzZSB4bGluazpocmVmPSIjaGstYSIgdHJhbnNmb3JtPSJyb3RhdGUoMTQ0IDI0OC41IDI1OS41KSIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2hrLWEiIHRyYW5zZm9ybT0icm90YXRlKDIxNiAyNDguNSAyNTkuNSkiLz4KICA8dXNlIHhsaW5rOmhyZWY9IiNoay1hIiB0cmFuc2Zvcm09InJvdGF0ZSgyODggMjQ4LjUgMjU5LjUpIi8+Cjwvc3ZnPgo=');
  background-size: cover;
  background-position: center center;
}

.flag-cn {
  background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iZmxhZy1pY29ucy1jbiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxkZWZzPgogICAgPHBhdGggaWQ9ImNuLWEiIGZpbGw9IiNmZjAiIGQ9Ik0xLS4zLS43LjggMC0xIC42LjgtMS0uM3oiLz4KICA8L2RlZnM+CiAgPHBhdGggZmlsbD0iI2VlMWMyNSIgZD0iTTAgMGg1MTJ2NTEySDB6Ii8+CiAgPHVzZSB4bGluazpocmVmPSIjY24tYSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjggMTI4KXNjYWxlKDc2LjgpIi8+CiAgPHVzZSB4bGluazpocmVmPSIjY24tYSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTIxIDE0Mi42IC00NylzY2FsZSgyNS41ODI3KSIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2NuLWEiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTk4LjEgMTk4IC04MilzY2FsZSgyNS42KSIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2NuLWEiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTc0IDI3Mi40IC0xMTQpc2NhbGUoMjUuNjEzNykiLz4KICA8dXNlIHhsaW5rOmhyZWY9IiNjbi1hIiB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0ibWF0cml4KDE2IC0xOS45NjggMTkuOTY4IDE2IDI1NiAyMzAuNCkiLz4KPC9zdmc+Cg==');
  background-size: cover;
  background-position: center center;
}