New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
Issue with Menu Hover Behavior in Metronic
Hi,
I'm experiencing an issue with the Metronic menu. I have implemented it as shown below, using data-kt-menu-trigger="hover", but the menu behavior is inconsistent. Sometimes it opens on hover, and sometimes it doesn't.
I’m encountering this issue in multiple places across the application.
Here’s how I'm using it:
<div class="card-toolbar">
<!--begin::Menu-->
<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="hover"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
>
<i class="ki-duotone ki-category fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</i>
</button>
<!--begin::Menu 1-->
<div class="menu menu-column menu-rounded menu-sub menu-sub-dropdown w-200px menu-state-bg-light-primary menu-gray-800" data-kt-menu="true">
@for(item of menuItems;track item.dic_entity_id){
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu item-->
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
<span class="menu-title">{{ item.dic_translation }}</span>
@if(item.dic_value?.length > 0) {
<span class="menu-arrow"></span>
}
</a>
<!--end::Menu item-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
@for (event of item.dic_value; track event.event_id){
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon" data-kt-element="icon">
<img [src]="event.icon_path" class="w-20px"/>
</span>
<span class="menu-title"> {{ event.event_name }}</span>
</a>
</div>
<!--end::Menu item-->
}
</div>
<!--end::Menu sub-->
</div>
}
<!--end::Menu item-->
</div>
<!--end::Menu 1-->
<!--end::Menu-->
</div>
</div>Have you encountered this issue before? Is there a known fix or a best practice to ensure consistent hover behavior?
Thanks in advance!
Replies (1)
Hi Lea Karni
Its likely cause of inconsistent hover behavior in menu class. We will fix it.
In the meantime, please try these solutions:
Make sure to initialize the menu after your content is fully rendered:
import { AfterViewInit, Component } from "@angular/core";
import { KTMenu } from "path/to/menu";
@Component({
// your component config
})
export class YourComponent implements AfterViewInit {
ngAfterViewInit() {
// Small delay to ensure Angular has finished rendering
setTimeout(() => {
KTMenu.init();
}, 10);
}
}You can increase the hover timeout to make the menu more "sticky" by adding a data attribute:
<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="hover"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
data-kt-menu-dropdown-hover-timeout="500"
>If hover continues to be problematic, consider switching to click-based triggering:
<button
type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-attach="parent"
>
