Tabulator嵌套菜单优化需求：鼠标悬浮显示子菜单及高亮父项

针对Tabulator嵌套菜单默认不支持的两个需求，可通过CSS自定义样式结合少量JS实现：

1. 鼠标悬浮触发子菜单显示 #

利用CSS的:hover伪类覆盖默认的点击触发逻辑，无需修改Tabulator核心代码：

/* 悬浮时显示子菜单 */
.tabulator-menu-item-submenu:hover .tabulator-menu {
    display: block !important;
}

/* 禁用默认点击展开的子菜单显示（避免冲突） */
.tabulator-menu-item-submenu.tabulator-menu-item-open .tabulator-menu {
    display: none !important;
}

这段样式会让鼠标悬停在带子菜单的菜单项上时，自动展开子菜单，替代默认的点击触发行为。

2. 高亮带子菜单的菜单项 #

通过CSS为激活状态（悬浮或点击选中）的父菜单项添加背景色，明确子菜单来源：

方案一：仅悬浮时高亮 #

如果只需要在悬浮触发子菜单时高亮，直接用CSS即可：

.tabulator-menu-item-submenu:hover {
    background-color: #f0f0f0 !important; /* 可根据主题调整颜色 */
}

方案二：点击后保持高亮 #

如果需要点击父菜单项后也维持高亮状态，可配合少量JS实现：

// 监听菜单项点击，切换高亮类
document.addEventListener('click', (e) => {
    const targetItem = e.target.closest('.tabulator-menu-item-submenu');
    
    if (targetItem) {
        targetItem.classList.toggle('tabulator-menu-item-highlight');
        // 关闭其他已高亮的菜单项
        document.querySelectorAll('.tabulator-menu-item-highlight').forEach(item => {
            if (item !== targetItem) item.classList.remove('tabulator-menu-item-highlight');
        });
    } else {
        // 点击菜单外区域移除所有高亮
        document.querySelectorAll('.tabulator-menu-item-highlight').forEach(item => item.classList.remove('tabulator-menu-item-highlight'));
    }
});

对应的CSS样式：

.tabulator-menu-item-highlight {
    background-color: #e8e8e8 !important;
}

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