Html – How can I ensure that the container is at least as wide as the longest text and that the entire text is visible?

* {
  padding: 0;
  margin: 0;
  font-family: monospace;
}

.language {
  list-style: none;
  background: #22438C;
  display: inline-block;
}

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

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

ul.dropdown li {
  display: block;
}

ul.dropdown {
  width: 100%;
  background: #22438C;
  position: absolute;
  z-index: 999;
  display: none;
}

.dropdown a:hover {
  background: #112C66;
}

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

<div class="container">
  <ul>
    <li>
      <a class="language" href="#">EN ▾</a>
      <ul class="dropdown">
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
  </ul>
</div>