支持多级子菜单的jquery下拉菜单代码

以下是一个使用jQuery实现的支持多级子菜单的下拉菜单代码示例：

HTML结构

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Products</a>
                <ul class="submenu">
                    <li><a href="#">Electronics</a></li>
                    <li>
                        <a href="#">Clothing</a>
                        <ul class="submenu">
                            <li><a href="#">Men's</a></li>
                            <li><a href="#">Women's</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
}

.menu, .submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu > li {
    position: relative;
    display: inline-block;
}

.menu > li > a, .submenu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
}

.menu > li > a:hover, .submenu a:hover {
    background-color: #555;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    min-width: 150px;
}

.menu > li:hover > .submenu {
    display: block;
}

.submenu > li {
    position: relative;
}

.submenu > li > .submenu {
    top: 0;
    left: 100%;
}

jQuery脚本

// script.js
$(document).ready(function() {
    $('.menu > li').hover(
        function() {
            $(this).find('.submenu').stop(true, true).slideDown(200);
        },
        function() {
            $(this).find('.submenu').stop(true, true).slideUp(200);
        }
    );
});

基础概念

HTML结构：使用嵌套的无序列表（<ul>和<li>）来创建菜单和子菜单。
CSS样式：通过设置绝对定位和显示属性来控制子菜单的显示和隐藏。
jQuery脚本：使用.hover()方法来处理鼠标悬停事件，通过.slideDown()和.slideUp()方法来平滑地显示和隐藏子菜单。