CSS Drop-down-menu

Just in case you think you need to use JavaScript for drop-down-menus.

HTML

<div class="topBar">
  <div class="dropdown">
    <a class="toolbar-button nav-dropdown" title="Country Switcher">
      <span id="current-country">Global</span>
    </a>
    <ul id="country-switcher" class="toolbar-button dropdown-list">
      <li class="toolbar-button" data-countryid="1" id="country-1">
      <a>All</a>
      </li>
    <li class="toolbar-button" data-countryid="104" id="country-104">
      <a>India</a>
    </li>
    <li class="toolbar-button" data-countryid="16" id="country-16">
      <a>Australia</a>
    </li>
    </ul>
  </div>
</div>

CSS

/****************** Graphiql Country Switcher *******************/
#country-switcher {
    list-style-type: none;
    padding: 0px;
}

#country-switcher .toolbar-button{
    margin: 0px;
}

#country-switcher a {
    display: block;
    width:inherit;
}

#country-switcher li {
    display: block;
}

.topBar .dropdown-list {
    display: none;
    position: absolute;
    z-index: 199;
    width: 140px;
}

.topBar div.dropdown:hover .dropdown-list {
    display: block !important;
}

.topBar ul.dropdown-list li a:hover {
    color: black;
}