Failure to display the dropdown menu correctly-CodePudding

Well, according to the video I saw on YouTube, I wanted to start by creating a dropdown list. Everything was fine in the first step, and I created two sub-menus, host and domain, for the Services tag. Now I want to create several submenus for the host and domain submenus, but unfortunately the submenus are not fully displayed and only the last submenu is displayed?

What do you think I should do? where is the problem from ?

Attached image and html and css files

Note: I am totally newbie so simple explanations would be better

*{
   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 >

   <ul>

    <a href="#"> <li> Home </li> </a>
    <li> About us  </li>
    <li> Contact us  </li>
    <li > 
        Services
        <ul  >
            
            <li  > 
                Host
                <ul >
                   <li>1-month</li>
                   <li>3-month</li>
                   <li>6-month</li>
                   <li>12-month</li>
                       

                </ul> 
               


            </li>

            <li > 
                Domain
                <ul >
                <li>.ir</li> 
                <li>.com</li> 
                <li>.org</li>  
                </ul>

            </li>


        </ul>
    
    </li>


   </ul>

   </nav>

</header>


</body>


</html>

Image

CodePudding user response：

You are facing this issue because by mistake you have made position of .sub-domain ul li and .sub-host ul li as absolute due to which all the sub-menus are stacking on each other and only last one is visible. To fix the issue remove position:absolute. I have also removed two bugs which occur while hovering on submenu. You can see the code.

* {
  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 >

      <ul>

        <a href="#">
          <li> Home </li>
        </a>
        <li> About us </li>
        <li> Contact us </li>
        <li >
          Services
          <ul >

            <li >
              Host
              <ul >
                <li>1-month</li>
                <li>3-month</li>
                <li>6-month</li>
                <li>12-month</li>


              </ul>



            </li>

            <li >
              Domain
              <ul >
                <li>.ir</li>
                <li>.com</li>
                <li>.org</li>
              </ul>

            </li>


          </ul>

        </li>


      </ul>

    </nav>

  </header>


</body>


</html>