Trying a scrollable dropdown menu in CSS

I'm a beginner in CSS and I've been developing a dropdown menu in pure CSS following this tutorial https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

I tried the property overflow-y:auto to get a scroll bar but if I put in 'dropdown' doesn't work and if I put in 'dropdown content' doesn't work too. Is there any other option?

What I want to do is to have as you can see at my code is two images one text line and a dropdown menu with a list of languages display 5 by 5 with this is an image of what I am doing (https://ibb.co/JkN1HZS)

Here is my HTML CSS code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome screen</title>
</head>
<style>
  .fondo
    {
      position: absolute;
      top: 0;
      left: 0;
    }
.choose-language
    {
      position: relative;
      top: 200px;
      left: 80px;
      font-family: Ubuntu;
      font-style: bold;
      font-size: 25px;
      text-align: center;
      color: white;
    }
.logofinal
    {
      position: relative;
      top: 150px;
      left: 750px;
    }

    .dropbtn 
     /*botón menu*/
  {
  background-color: orange;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown 
 /*caja menu*/
{
  position: relative;
  display:inline-block;
  left: 860px;
  top: 250px;
  

}

.dropdown-content 
 /*cajones posbles*/
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 105px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a 
 /*opciones posibles*/
{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
}

.dropdown:hover .dropbtn {
  background-color: orange;
}
  
  
</style>
<div style="position: relative; left: 0; top: 0;">
     <img src="fondo.jpg" class="fondo" width="100%" height="auto"/>
     <img src="logofinal.png" class="logofinal" width="20%" height="auto"/>
<div class="choose-language">CHOOSE A LANGUAGE AND START THE ADVENTURE</div>
</body>
    <div class="dropdown">
      <button class="dropbtn">Languages</button>
      <class class="dropdown-content">
      <a href="#">Bulgarian</a>
      <a href="#">Croatian</a>
      <a href="#">Czech</a>
      <a href="#">Danish</a>
      <a href="#">Dutch</a>
      <a href="#">English</a>
      <a href="#">Estonian</a>
      <a href="#">Finnish</a>
      <a href="#">French</a>
      <a href="#">German</a>
      <a href="#">Greek</a>
      <a href="#">Hungarian</a>
      <a href="#">Irish</a>
      <a href="#">Italian</a>
      <a href="#">Latvian</a>
      <a href="#">Lithuanian</a>
      <a href="#">Maltese</a>
      <a href="#">Polish</a>
      <a href="#">Portuguese</a>
      <a href="#">Romanian</a>
      <a href="#">Slovak</a>
      <a href="#">Slovenian</a>
      <a href="#">Spanish</a>
      <a href="#">Swedish</a>


      </class>
    </div>
    </body>
   

</html>

Solution

If i'm correct you are trying to have your dropdown menu scrollable instead of the gigantic list you are getting now.

The reason the list is getting this long is because there is no maximum to its height. You can easily fix this by adding a max-height property to your dropdown list:

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
  max-height:200px; /* add this or some bigger/smaller value*/
}

Example with (a part of) your code:

.dropdown-content 
 /*cajones posbles*/
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 105px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a 
 /*opciones posibles*/
{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
  max-height:200px;
}

.dropdown:hover .dropbtn {
  background-color: orange;
}

<div class="dropdown">
      <button class="dropbtn">Languages</button>
      <class class="dropdown-content">
      <a href="#">Bulgarian</a>
      <a href="#">Croatian</a>
      <a href="#">Czech</a>
      <a href="#">Danish</a>
      <a href="#">Dutch</a>
      <a href="#">English</a>
      <a href="#">Estonian</a>
      <a href="#">Finnish</a>
      <a href="#">French</a>
      <a href="#">German</a>
      <a href="#">Greek</a>
      <a href="#">Hungarian</a>
      <a href="#">Irish</a>
      <a href="#">Italian</a>
      <a href="#">Latvian</a>
      <a href="#">Lithuanian</a>
      <a href="#">Maltese</a>
      <a href="#">Polish</a>
      <a href="#">Portuguese</a>
      <a href="#">Romanian</a>
      <a href="#">Slovak</a>
      <a href="#">Slovenian</a>
      <a href="#">Spanish</a>
      <a href="#">Swedish</a>


      </class>
    </div>