根据我在YouTube上看到的视频，我想从创建一个下拉列表开始。在第一步中一切都很好，我为Services标记创建了两个子菜单，host和domain。现在我想为主机和域子菜单创建几个子菜单，但不幸的是，子菜单没有完全显示，只显示最后一个子菜单?
你觉得我该怎么做?问题从哪里来?
附加图片和html和css文件
注意:我完全是新手，所以简单的解释会更好
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu{
margin: 0px;
background-color: orange;
}
header nav ul{
margin: 0px;
}
a{
text-decoration: none;
}
.menu ul li{
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover{
background-color: rgb(132, 127, 127);
color:rgb(249, 249, 249);
}
.sub-menu1{
width:200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li{
width:200px;
margin: 0px !important;
}
.dropdown_menu:hover ul{
display: block ;
}
.sub-menu1 li:hover{
background-color: rgb(103, 197, 109);
color:rgb(249, 249, 249);
}
.sub-host ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
display: none;
}
.sub-host:hover li{
display: block;
}
.sub-domain:hover li{
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li> <a href="#"> Home </a> </li>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1" >
<li class="sub-host" >
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>您正面临这个问题，因为您错误地制作了position of .sub-domain ul li and .sub-host ul li as absolute，因此所有子菜单都堆叠在一起，只有最后一个可见。要解决此问题，请删除position:absolute。我还删除了两个错误，而发生在子菜单上悬停。您可以看到代码。
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu {
margin: 0px;
background-color: orange;
}
header nav ul {
margin: 0px;
}
a {
text-decoration: none;
}
.menu ul li {
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover {
background-color: rgb(132, 127, 127);
color: rgb(249, 249, 249);
}
.sub-menu1 {
width: 200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li {
width: 200px;
margin: 0px !important;
}
.dropdown_menu:hover ul {
display: block;
}
.sub-menu1 li:hover {
background-color: rgb(103, 197, 109);
color: rgb(249, 249, 249);
}
.sub-host ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
display: none;
}
.sub-host:hover li {
display: block;
}
.sub-domain:hover li {
display: block;
}
.sub-menu2,
.sub-menu3 {
position: absolute;
height: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<a href="#">
<li> Home </li>
</a>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1">
<li class="sub-host">
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>