多级下拉菜单hover状态无法保留，无法点击子菜单问题求助

问题说明 #

你制作的Mega菜单中，Software菜单下的三级子菜单无法正常操作——当鼠标从父元素（Adobe/Microsoft）移到三级菜单时，整个下拉菜单会立即消失，无法点击三级菜单选项。

问题根源 #

1. hover范围局限：当前CSS使用相邻兄弟选择器（+），比如.software:hover + .drop-menu-2，只有鼠标悬停在.software标签本身时才会显示二级菜单。一旦鼠标移到二级菜单区域，.software的hover状态丢失，二级菜单直接隐藏。
2. 菜单间距导致hover断层：三级菜单和父元素（Adobe/Microsoft）之间存在间距，鼠标移动过程中会离开父元素的hover范围，触发三级菜单隐藏。

修复步骤 #

1. 调整HTML结构 #

将Software的一级菜单和二级菜单包裹在同一个容器内，同时给三级菜单的父元素也添加容器，确保hover范围覆盖整个菜单交互区域。

2. 修改CSS逻辑 #

把hover事件绑定到容器上，替换原来的相邻兄弟选择器，确保鼠标在整个菜单区域内时，所有层级的菜单都保持显示状态。

3. 消除hover断层 #

通过容器的hover范围覆盖，避免鼠标移动时因空隙导致的hover状态丢失。

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
    <style>
        @font-face {
            font-family: Pacifico;
            src: url(./fonts/Pacifico-Regular.ttf);
        }
        @font-face {
            font-family: Exo;
            src: url(./fonts/Exo2-VariableFont_wght.ttf);
        }
        body{
            margin: 0;
            padding: 0;
        }
        .drop-menu{
            visibility: hidden;
            opacity: 0;            
            transition: opacity 0.2s linear;
            z-index: 1;
        }
        .hover-product:focus + .drop-menu{
            visibility: visible;   
            opacity: 1;                  
        }  
        .drop-menu-2{
            visibility: hidden;
        }
        /* 容器hover控制二级菜单显示 */
        .software-container:hover .drop-menu-2{
            visibility: visible;
        }  
       
        .cat-detail-1, .cat-detail-2{
            visibility: hidden;
        }
        /* 容器hover控制三级菜单显示 */
        .main-drop-container:hover .cat-detail-1,
        .main-drop-container:hover .cat-detail-2 {
            visibility: visible;
        }
        .active{
            background-color:red;
        }
    </style>
</head>
<body>
    <ul class="flex justify-between bg-yellow-200 relative top-5">
        <li>
            <p style="font-family: Pacifico;">Logo</p>
        </li>
        <li>
            <a href="#">About Us</a>
        </li>
        <li>
            <a href="#" class="hover-product">Products</a>
            <div class="drop-menu flex bg-gray-200 rounded-2xl left-0 absolute w-[95%] ml-10 mt-5" style="font-family: Exo;">
                <img src="./img/female_shopping_from_phone.jpg" alt="Pic" class="w-1/4 h-80 p-3 rounded-3xl">
                <div class="w-3/4 flex pt-10 leading-10">
                    <div class="cat-detail w-1/3 text-center">                          
                        <div>  
                            <a href="#" class="block font-bold text-2xl mb-5">Laptops</a>                                             
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3  hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8 " >Asus</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lenovo</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">HP</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">MSI</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Dell</a>
                        </div>                   
                    </div>
                    <div class="cat-detail w-1/3 text-center ">                       
                        <div>
                            <a href="#" class="block font-bold text-2xl mb-5">Mobile</a>                       
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Samsung</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Iphone</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Xiaomi</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">HTC</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Huawei</a>
                        </div>                   
                    </div>
                    <div class="cat-detail w-1/3 text-center">                       
                        <div>
                            <a href="#" class="block hover:transition hover:ease-in-out font-bold text-2xl mb-5">PC Hardware</a>                       
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Graphic card</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">CPU</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Ram</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">SSD</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Mother Board</a>
                        </div>                   
                    </div>
                </div>
            </div>
        </li>
        <!-- 包裹Software一级菜单和二级菜单的容器 -->
        <li class="software-container relative">
            <a href="#" class="software">Software</a>
            <div class="drop-menu-2 w-[35%] bg-gray-200 absolute left-[55%] flex justify-around p-7 mt-5 rounded-2xl" style="font-family: Exo;">
                <!-- 包裹Adobe和三级菜单的容器 -->
                <div class="main-drop-container relative">
                    <a href="#" class="font-bold main-drop-1">Adobe</a>
                    <div class="cat-detail-1 absolute -ml-[3%] mt-5 bg-red-400 p-5 rounded-xl">    
                        <div class="mb-3 leading-8">
                            <p class="font-bold">sec1</p>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                        </div>
                        <div class="leading-8">
                            <p class="font-bold">sec2</p>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                        </div>
                    </div>
                </div>
                <!-- 包裹Microsoft和三级菜单的容器 -->
                <div class="main-drop-container relative">
                    <a href="#" class="font-bold main-drop-2">Microsoft</a>
                    <div class="cat-detail-2 absolute -ml-[3%] mt-5 bg-red-400 p-5 rounded-xl">    
                        <div class="mb-3 leading-8">
                            <p class="font-bold">sec1</p>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                        </div>
                        <div class="leading-8">
                            <p class="font-bold">sec2</p>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                            <a href="#" class="block hover:transition hover:ease-in-out hover:-translate-x-3 hover:underline hover:decoration-in hover:decoration-indigo-500 hover:decoration-2  hover:underline-offset-8">Lorem</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <button class="w-32 h-10 rounded-3xl bg-indigo-400 text-white hover:bg-indigo-500 focus:bg-indigo-600 focus:ring-4 duration-200" style="font-family: Pacifico;">Login</button>
        </li>
    </ul>
</body>
</html>

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