.nav-top {
  overflow: hidden;
  background-color: rgb(128, 128, 128);
  font-family: Lato, sans-serif;
  color: white;
}
.nav-top a {
  float: left;
  padding: 14px 16px;
  text-decoration: none; text-align: center; font-size: 14px;
}
.nav-top a.active {
  float: right;
  color: white;
}
.submenu {
  float: left;
  overflow: hidden;
  background-color: inherit;
  color: inherit;
}
.submenu .submenu__btn {
  font-family: inherit; /* Important for vertical align on mobile phones */
  font-size: 14px;
  border: none; outline: none;
  padding: 14px 16px;
  margin: 0px; /* Important for vertical align on mobile phones */
  background-color: inherit;
  color: inherit;
}
.nav-top a:hover, .submenu:hover {
  color: #431c5d;
  background-color: rgb(245,245,245);
}
.submenu__items {
  position: absolute; 
  background-color: rgb(235,235,235);
  border: 0 solid #DCD6D5;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  width: auto;
  z-index: 1;
  display: none;
}
.submenu__items a {
  float: left; clear: left;
  width: 100%;
  padding: 12px 16px;
  text-decoration: none; text-align: left;
  color: #431c5d;
  display: block;

}
.submenu__items a:hover {
  color: #DCD6D5;
  background-color: rgb(128, 128, 128);
}
.submenu:hover .submenu__items {
  display: block;
}