实现Hover触发的嵌套Dropdown菜单技术求助

我会帮你实现嵌套下拉菜单，下面详细说明修改内容和作用，同时清理代码里的冗余部分：

一、清理现有CSS的冗余代码 #

你的style.css里重复定义了body、ul、label.logo、li的样式，这会增加代码体积且容易引发样式冲突，先删掉重复的后半段代码（从/* next */开始的重复内容）。

二、HTML代码修改（添加嵌套下拉结构） #

把原来主下拉菜单里的<a href="#">Sub Dropdown</a>替换成嵌套的下拉菜单容器，这样就能实现子下拉功能：

<html>
    <head>
            <title>Test</title>
            <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <ul>
            <label class="logo">Test Page</label>
            <li><a href="index.html">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropbtn">Dropdown Menu</a>
                <div class="dropdown-content">
                    <a href="x/y/z.html">Link One</a>
                    <a href="z/y/x.html">Link Two</a>
                    <!-- 新增嵌套下拉结构 -->
                    <li class="dropdown">
                        <a href="#" class="dropbtn">Sub Dropdown</a>
                        <div class="dropdown-content">
                            <a href="#">Sub Link 1</a>
                            <a href="#">Sub Link 2</a>
                            <a href="#">Sub Link 3</a>
                        </div>
                    </li>
                </div>
            </li>
        </ul>
    </body>
</html> 

修改作用：把普通链接改成带.dropdown类的列表项，包含下拉按钮和子菜单内容，让它具备下拉菜单的结构基础。

三、CSS代码修改（实现嵌套下拉的样式和交互） #

在原有CSS基础上，新增和调整以下样式：

body
{
    font-family: sans-serif;
    background: #FFB6C1;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FFC0CB;
}

label.logo
{
  color: white;
  font-weight: bold;
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}

li
{
    float: left;
}

li a, .dropbtn
{
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn
{
    background: #ffaebd;
}

li.dropdown
{
    display: inline-block;
}

.dropdown-content
{
    display: none;
    position: absolute;
    background: #201e2a;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* 新增：让子下拉菜单以当前dropdown-content为定位基准 */
    position: relative;
}

.dropdown-content a
{
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover
{
    background: #ffaebd;
}

.dropdown:hover .dropdown-content
{
    display: block;
}

/* 新增：嵌套下拉的专属样式 */
/* 确保子下拉容器在父菜单里正常显示 */
.dropdown-content .dropdown
{
    display: block;
    float: none;
}

/* 子下拉菜单定位在父菜单右侧 */
.dropdown-content .dropdown .dropdown-content
{
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
}

/* 鼠标悬停子下拉按钮时，显示子菜单 */
.dropdown-content .dropdown:hover .dropdown-content
{
    display: block;
}

修改作用说明：

1. 给.dropdown-content添加position: relative：让子下拉菜单的绝对定位不再以页面为基准，而是以父级下拉菜单容器为基准，避免位置偏移。
2. 新增.dropdown-content .dropdown样式：把子下拉容器改成块级、取消浮动，确保它在父菜单里垂直排列，不破坏原有布局。
3. 子下拉菜单设置left: 100%; top: 0;：让子菜单从父菜单的右侧边缘开始显示，正好对应你说的红色区域位置。
4. 新增.dropdown-content .dropdown:hover .dropdown-content规则：实现鼠标悬停在子下拉按钮上时，自动展开子菜单的交互效果。
5. 优化.dropdown-content a:hover样式：让子菜单里的链接 hover 时背景色和主导航保持一致，视觉统一。

这样修改后，你就能得到一个主下拉菜单内包含子下拉菜单的导航啦~

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