Html 正在尝试CSS中的可滚动下拉菜单
我是CSS的初学者，在本教程之后，我一直在开发纯CSS的下拉菜单 我尝试了属性overflow-y:auto来获得一个滚动条，但是如果我输入了“dropdown”则不起作用，如果输入了“dropdown content”也不起作用。还有其他选择吗 我想做的是，正如你在我的代码中看到的那样，有两个图像一个文本行和一个带有语言列表的下拉菜单，用显示5乘5这是我正在做的事情的图像（） 这是我的HTML CSS代码Html 正在尝试CSS中的可滚动下拉菜单,html,css,menu,dropdown,Html,Css,Menu,Dropdown,我是CSS的初学者，在本教程之后，我一直在开发纯CSS的下拉菜单 我尝试了属性overflow-y:auto来获得一个滚动条，但是如果我输入了“dropdown”则不起作用，如果输入了“dropdown content”也不起作用。还有其他选择吗 我想做的是，正如你在我的代码中看到的那样，有两个图像一个文本行和一个带有语言列表的下拉菜单，用显示5乘5这是我正在做的事情的图像（） 这是我的HTML CSS代码 <!DOCTYPE html> <html lang="en
<!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>
欢迎屏幕
丰多先生
{
位置：绝对位置；
排名：0；
左：0；
}
.选择语言
{
位置：相对位置；
顶部：200px；
左：80px；
字体系列：Ubuntu；
字体风格：粗体；
字体大小：25px；
文本对齐：居中；
颜色：白色；
}
.最后的
{
位置：相对位置；
顶部：150px；
左：750px；
}
.dropbtn
/*博顿菜单*/
{
背景颜色：橙色；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表
/*caja菜单*/
{
位置：相对位置；
显示：内联块；
左：860px；
顶部：250px；
}
.下拉内容
/*cajones posbles*/
{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：105px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a
/*可能的选择*/
{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
溢出：自动；
}
.dropdown:悬停.dropbtn{
背景颜色：橙色；
}
选择一种语言，开始冒险
语言文字
.dropdown:hover .dropdown-content {
display: block;
overflow:auto;
max-height:200px; /* add this or some bigger/smaller value*/
}
。下拉式内容
/*cajones posbles*/
{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：105px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a
/*可能的选择*/
{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
溢出：自动；
最大高度：200px；
}
.dropdown:悬停.dropbtn{
背景颜色：橙色；
}
语言文字