body {
  margin: 0;
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  background: #22438c;
  display: flex;
  justify-content: center;  /* center on desktop */
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  position: relative;
}

ul li a {
  display: block;
  padding: 20px 25px;
  color: #FFF;
  text-decoration: none;
  font-size: 20px;
}

ul li a:hover {
  background: #112c66;
}

ul li ul.dropdown{
    width:auto;
    top:100%;
    right: 0;
    left: 0;
    width: 100%;
    background: #22438c;
    position: absolute;
    z-index: 9999;
    display:none ;

}

ul li:hover ul.dropdown {
  display: block;
}

ul li ul.dropdown li {
  display: block;
}

ul li ul.dropdown a {
  font-size: 18px;
  padding: 15px;
}

ul li ul.dropdown a:hover {
  background: #112c66;
}

/* Active link */
ul li a.active,
ul li a.clicked {
  color: rgb(211, 86, 86);
  font-weight: bold;
  background: #112c66;
}

/* Menu toggle button (hidden on desktop) */
.menu-toggle {
  display: none;
  font-size: 26px;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  background: #fff;       /* white background */
  color: #22438c;         /* blue icon */
  margin-left: auto;      /* push to right */
}

/* Mobile view */
@media (max-width: 768px) {
  ul {
    display: none;          /* hide nav links */
    flex-direction: column; 
    width: 100%;
    background: #22438c;
  }

  ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;   /* show only on mobile */
  }

  ul li {
    text-align: center;
    width: 100%;
  }

  ul li ul.dropdown {
    position: static;
    width: 100%;
  }
}