尝试 CSS 中的可滚动下拉菜单

Question

我是 CSS 的初学者，我一直在按照本教程 https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

纯 CSS 开发下拉菜单

我尝试了属性 overflow-y:auto 来获取滚动条，但是如果我输入 'dropdown' 则不起作用，如果我输入 'dropdown content' 则不起作用也工作。还有其他选择吗？

我想要做的是，正如您在我的代码中看到的那样，有两张图片，一个文本行和一个带有语言列表的下拉菜单，5 x 5 显示这是一张图片我在做什么 (https://ibb.co/JkN1HZS)

这是我的 HTML CSS 代码

<!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>

Answer 1

如果我是对的，你正试图让你的下拉菜单可滚动，而不是你现在得到的巨大列表。

列表之所以这么长，是因为它的高度没有上限。您可以通过在下拉列表中添加最大高度属性来轻松解决此问题：

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

您的（部分）代码示例：

.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>

尝试 CSS 中的可滚动下拉菜单

Trying a scrollable dropdown menu in CSS

html

css

menu

dropdown