dedecms导航 二级菜单

// 假设导航菜单的HTML结构如下
/*
<ul class="nav">
    <li><a href="#">一级菜单1</a>
        <ul class="sub-menu">
            <li><a href="#">二级菜单1-1</a></li>
            <li><a href="#">二级菜单1-2</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单2</a></li>
</ul>
*/

// JavaScript代码实现下拉菜单展开效果
document.addEventListener('DOMContentLoaded', function() {
    var navItems = document.querySelectorAll('.nav > li');
    navItems.forEach(function(item) {
        item.addEventListener('mouseenter', function() {
            var subMenu = this.querySelector('.sub-menu');
            if (subMenu) {
                subMenu.style.display = 'block';
            }
        });
        item.addEventListener('mouseleave', function() {
            var subMenu = this.querySelector('.sub-menu');
            if (subMenu) {
                subMenu.style.display = 'none';
            }
        });
    });
});