无法正确显示下拉菜单

Question

好吧，根据我在 YouTube 上看到的视频，我想从创建下拉列表开始。第一步一切都很好，我为服务标签创建了两个子菜单，主机和域。现在我想为主机和域子菜单创建几个子菜单，但遗憾的是子菜单没有完全显示，只显示最后一个子菜单？

你觉得我应该怎么做？问题出在哪里？

附加图像和 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>

Image

Answer 1

您遇到此问题是因为您错误地制作了 position of .sub-domain ul li and .sub-host ul li as absolute，导致所有 sub-menus 相互堆叠，只有最后一个可见。要解决此问题，请移除 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>

无法正确显示下拉菜单

Failure to display the dropdown menu correctly

html

css