Metronic下拉菜单Hover状态异常问题求助

问题现象 #

• 光标停留在菜单按钮上时，Hover效果显示正常
• 光标移入下拉选项区域后，菜单按钮变为白色
• 已尝试删除一处重复的激活配置，但问题仍存在，推测是移入选项时按钮激活状态被取消

问题场景截图 #

光标在菜单按钮上

光标在下拉选项上

问题代码 #

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <div class="menu menu-column menu-gray-600 menu-active-primary menu-hover-light-primary fw-semibold w-30px h-30px w-md-40px h-md-40px" data-kt-menu="true">
        <!-- Menu item -->
        <div class="menu-item menu-item-calendar" data-kt-menu-trigger="hover" data-kt-menu-placement="bottom-end">
            <!-- Menu link -->
            <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                <span class="svg-icon svg-icon-1">
                    <svg width="24" height="24" viewBox="0 2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- SVG -->
                    </svg>
                </span>
            </a>
            <!-- Menu sub -->
            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true">
                <!-- Menu item: Local -->
                <div class="menu-item px-3 my-0">
                    <a href="<?= site_url('calendar') ?>" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Local</span>
                    </a>
                </div>
                <!-- Menu item: Outlook -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonOutlook" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Outlook</span>
                    </a>
                </div>
                <!-- Menu item: Google -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonGoogle" class="menu-link px-3 py-2">
                        <span class="menu-icon">
                            <img src="assets/media/logos/gmanu.png" width="25" height="25" class="google-icon" />
                        </span>
                        <span class="menu-title">Google</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

正常对比案例 #

现有一个实现正常的下拉菜单，光标移入选项时按钮Hover状态可保持正常：

正常场景截图 #

正常代码 #

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
        <span class="svg-icon theme-light-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
        <span class="svg-icon theme-dark-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
    </a>
    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true" data-kt-element="theme-mode-menu">
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.light') ?></span>
            </a>
        </div>
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.dark') ?></span>
            </a>
        </div>
    </div>
</div>

感谢各位帮助！

内容的提问来源于stack exchange，提问作者Hugo Jiménez