I'm encountering an issue with a navigation dropdown menu inside a container. The HTML and CSS provided are intended to showcase a language dropdown menu, but I'm struggling with the container not adjusting its width based on the longest text within it. My goal is to ensure that the container always expands to accommodate the longest text and that the entire text remains visible. Is there a way to address this using the current code?
* {
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>