CSS实现多级下拉菜单仅显示最后一个子项的问题求助

二级子菜单只显示最后一项的核心原因有2个：

1. 你把position: absolute属性加在了二级菜单的每一个<li>子项上，所有绝对定位的元素没有设置差异化偏移的话，会全部堆叠在同一个坐标位置，视觉上就只能看到最上层的最后一个子项，前面的项都被盖住了。
2. 二级菜单的父容器（即Host、Domain两个一级子菜单项）没有设置相对定位，导致绝对定位的二级菜单找不到正确的定位参考，位置偏移逻辑混乱。

另外你的HTML代码还有两处笔误：<meat charset="UTF-8">应为<meta charset="UTF-8">，viewport属性里的intital-scale应为initial-scale，不修复可能导致移动端适配异常。

• 移除原CSS中给.sub-host ul li、.sub-domain ul li设置的position: absolute、transform属性，绝对定位应该绑定在二级菜单的<ul>容器上，而非单个菜单项。
• 给一级子菜单项.sub-host、.sub-domain添加position: relative，作为二级弹出菜单的定位参照。
• 给二级菜单容器.sub-menu2、.sub-menu3设置统一样式：默认隐藏、绝对定位、固定宽度、偏移到一级子菜单右侧，hover父级菜单项时设置为显示状态。

修正后的HTML（仅修正笔误部分，结构无需改动） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-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>

修正后的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;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.menu ul li{
    display: inline-block;
    margin: 20px;
    padding: 20px;
    font-weight: bold;
    color: black;
    position: relative;
}
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);
    list-style: none;
}
.sub-menu1 li{
    width:200px;
    margin: 0px !important;
}
.dropdown_menu:hover .sub-menu1{
    display: block ;
}
.sub-menu1 li:hover{
    background-color: rgb(103, 197, 109);
    color:rgb(249, 249, 249);
}
/* 二级菜单通用样式 */
.sub-menu2, .sub-menu3{
    width:200px;
    display: none;
    background-color: green;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub-menu2 li, .sub-menu3 li{
    width:200px;
    margin: 0px !important;
    padding: 20px !important;
}
.sub-host:hover .sub-menu2,
.sub-domain:hover .sub-menu3{
    display: block;
}

额外优化：给所有ul加了list-style: none去掉默认列表圆点，给a标签加了color: inherit继承父级文字颜色，避免链接默认蓝色，hover选择器从通用的ul改成精确对应子菜单类名，避免误触发其他层级的菜单显示。

内容的提问来源于stack exchange，提问作者tommy