css – Vertical Mega Menu disappears too quickly after mouse leave

Question

I have created a vertical menu on WordPress, but I’m having a problem because the Mega Menu is disappearing too quickly. As you can see in the image there is a gap between last category with menu shown on hover and the list must be ordered like that, so I have tried to add delay timer after mouse leave category tab so the visitor can click on the link. I still think that the best way is to add setTimer for delay after leaving cursor.
image of problem

Website link where I work: https://tdb.pfm.mybluehost.me/

What I have tried:

$(function()

{
var timer = 0;
$(“ul.dropdown > li”).hover(function()
{
if (timer) clearTimeout(timer);
$(“ul.dropdown > li”).removeClass(“hover”);
$(“ul.dropdown > li ul”).css(‘visibility’, ‘hidden’);
$(this).addClass(“hover”);
$(‘ul:first’,this).css(‘visibility’, ‘visible’);
}, function()
{
var link = $(this);
timer = setTimeout(function(){
$(link).removeClass(“hover”);
$(‘ul:first’,link).css(‘visibility’, ‘hidden’);
}, 5000);
});
$(“ul.dropdown li ul li:has(ul)”).find(“a:first”).append(” » “);
});

I have added this but not working, so during the search on internet it seems that the problem also can be solved using only css to set delay after mouse leave.

0
Enes Bajrami 2 months 2021-08-07T04:45:31-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse