Stop my dropdown appearing onload when I have clicked on nav link

Question

I can't seem to find the right search words for this answer! I have a dropdown in my navigation that appears on hover, if I click the nav link to go to another page and my mouse stays in the same place, how can I prevent it from loading the dropdown? I want it to be like this site:

https://www.reiss.com/rw/womens/

If I hover over 'women' the dropdown appears, if I click on 'women' it takes me to that page but the dropdown is gone until I move my mouse away and back over it. Currently, in my code when I click through the dropdown, it appears when the page is loaded if my mouse hasn't moved.

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){

    }
);

$('#nav_menu').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

Answer 1

This might get you the desired results.

$('.nav').mouseeter(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

https://api.jquery.com/mouseenter/

This way the trigger is when you enter the nav, not when you hover over it.

I'm having a hard time figuring out your code. But you may need to also use mouseleave event.