mega menu control that opens slowly in the first tab and works at normal speed in other tabs?

Question

I made mega menu and I want to delay the opening of mega menu with hover. however, only the first tab should open slowly and run at normal speed in other tabs. In the codes below, the tabs overlap. Can you help me control this? how can i solve this problem with jquery without adding class

$(".navbar-nav .nav-item").children(".navbarCatName")
    .mouseenter(function (){
    let a = $(this).parent().children(".dropdown-menu");
    let hoverTimeout;
    hoverTimeout = setTimeout(function (){
        a.addClass("open");
    },500)
    })
    .mouseleave(function (){
        let a = $(this).parent().children(".dropdown-menu");
        let hoverTimeout;
        hoverTimeout = setTimeout(function (){
            a.removeClass("open");
        },0)
    })