在多级下拉菜单中，如何防止子菜单重叠

在多级下拉菜单中防止子菜单重叠是一个常见的前端开发问题。以下是一些基础概念和相关解决方案：

基础概念

多级下拉菜单：指的是一个菜单项包含多个子菜单项，这些子菜单项可以进一步包含更多层级的子菜单。
重叠：当多个子菜单在同一位置显示时，它们会相互覆盖，导致用户无法正常交互。

类型

水平多级菜单：子菜单在水平方向展开。
垂直多级菜单：子菜单在垂直方向展开。

应用场景

网站导航：大型网站或应用中常见的导航结构。
管理系统：后台管理系统中复杂的权限和功能导航。

解决方案

1. 使用CSS定位

通过CSS的绝对定位和相对定位来控制子菜单的位置，避免重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-level Dropdown Menu</title>
    <style>
        .menu {
            position: relative;
            display: inline-block;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .menu:hover .submenu {
            display: block;
        }
        .submenu .submenu {
            top: 0;
            left: 100%;
        }
    </style>
</head>
<body>
    <div class="menu">
        Menu 1
        <div class="submenu">
            Submenu 1.1
            <div class="submenu">
                Submenu 1.1.1
            </div>
        </div>
        <div class="submenu">
            Submenu 1.2
        </div>
    </div>
    <div class="menu">
        Menu 2
        <div class="submenu">
            Submenu 2.1
        </div>
    </div>
</body>
</html>

2. 使用JavaScript动态调整位置

通过JavaScript检测子菜单的位置，并在必要时动态调整其位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-level Dropdown Menu</title>
    <style>
        .menu {
            position: relative;
            display: inline-block;
        }
        .submenu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .menu:hover .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu">
        Menu 1
        <div class="submenu">
            Submenu 1.1
            <div class="submenu">
                Submenu 1.1.1
            </div>
        </div>
        <div class="submenu">
            Submenu 1.2
        </div>
    </div>
    <div class="menu">
        Menu 2
        <div class="submenu">
            Submenu 2.1
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menus = document.querySelectorAll('.menu');
            menus.forEach(menu => {
                menu.addEventListener('mouseenter', function() {
                    const submenus = this.querySelectorAll('.submenu');
                    submenus.forEach(submenu => {
                        const rect = submenu.getBoundingClientRect();
                        if (rect.right > window.innerWidth) {
                            submenu.style.left = `-${rect.width}px`;
                        }
                    });
                });
            });
        });
    </script>
</body>
</html>