How to adjust dropdown menu width to fit its content?

Question

Instead of having 600% width on dropdown-content I would like it to adjust itself to the width of its content...

I have been searching everywhere without success. Does anyone knows how can I do it?

https://jsfiddle.net/eph0nk9v/

<div class="dropdown">
          <button class="dropbtn">Language       </button>
          <div class="dropdown-content linguas">
                <a href="#" id="fr">       Français             </a>
                <a href="#" id="es">       Español              </a>
                <a href="#" id="en">       English              </a>
          </div>

---

edit:

I want the three options to be on the same line. That's a picture of what the final result should look like: http://unasus.ufcspa.edu.br/cidadesvirtuais/rafaela/img/final.png

Solution 1

Give your .dropdown-content a width and height of auto:

.dropdown-content {
  display: none;
  position: absolute;
    right: 0;
    padding-top: 0%;
    padding-bottom: 0%;
  width: auto;
    height: auto;


    background: white;
    overflow: hidden;
    border-radius: 25px;

    border: 3px solid #edede6;
    font-size: 5vh;
    font-family: Helvetica;
}

Fiddle

Solution 2

You might need to work more on the css of the code.

Updated the code below to reflect your changes.

I think you have too much of padding on the a element. width of content is now 93vw. (vw - viewport width) changed those in pixel.

.dropbtn {
  background-color: transparent;
  background-image: url("https://www.acadaslate.com/App_Themes/Default/images/glyphicon-triangle-bottom.png");
  background-repeat: no-repeat;
  background-position: right center;
  color: black;
  border: none;
  cursor: pointer;
  white-space: pre;
  font-size: 5vh;
  font-family: Helvetica;
  padding-right: 28px;
}
.dropdown {
  position: absolute;
  display: inline-block;
  top: 12%;
  right: 5%;
  margin: 0 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  padding-top: 0%;
  padding-bottom: 0%;
  width: 93vw;
  height: auto;
  background: white;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #edede6;
  font-size: 5vh;
  font-family: Helvetica;
}
.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: inline-block;
}
.dropdown:hover .dropbtn {
  background-color: transparent;
}
#fr {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}
#es {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}
#en {
  background-color: white;
  background-image: url("http://www.liderfitness.com.br/app/arquivos/img/default/cinza.png");
  background-repeat: no-repeat;
  background-position: left center;
  white-space: pre;
}

<div class="dropdown">
  <button class="dropbtn">Language</button>
  <div class="dropdown-content linguas">
    <a href="#" id="fr">       Français             </a>
    <a href="#" id="es">       Español              </a>
    <a href="#" id="en">       English              </a>
  </div>
</div>