js三级横向导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级导航菜单</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        li {
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        li:hover > .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">菜单1</a>
            <ul class="submenu">
                <li>
                    <a href="#">子菜单1-1</a>
                    <ul class="submenu">
                        <li><a href="#">子菜单1-1-1</a></li>
                        <li><a href="#">子菜单1-1-2</a></li>
                    </ul>
                </li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
            </ul>
        </li>
    </ul>

    <script>
        document.querySelectorAll('.menu > li').forEach(item => {
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                const submenu = item.querySelector('.submenu');
                if (submenu) {
                    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
                }
            });
        });

        document.addEventListener('click', () => {
            document.querySelectorAll('.submenu').forEach(submenu => {
                submenu.style.display = 'none';
            });
        });
    </script>
</body>
</html>