Mega menu drop down problem

JavaScript
1

Hi guys, im using a mega men dropdown and inside there a series of ul’s.

On focus of the top nav the megamenu plugin fires and the dropdown opens… I can then tab through all the unordered list links inside and it moves across untill it gets ot the end of the navigation. What I can’t work out is how I activate the .blur event if the next tabindex is not inside the mega menu…

This is my code to activate the dropdown:


$("ul#mainnav li").hoverIntent(config).children('a').focus(function () {
 
 //need to trigger megaHoverOver
 megaHoverOver($(this).parent('li'));

 }).blur(function () {
 
 if(!$('#mainnav').find(this)){
 //need to trigger megaHoverOut
 megaHoverOut($(this).parent('li'));
 }
 });

The problem is the if statment in the blur event… I have a console.log on the $(‘#mainnav’).find(this) and it comes back as an object… but when the tab focus moves outside the menu area the object is no longer showing… which leads me to think the logic is correct… but the drop down stays visible…

Any ideas how I can get the if statement to work so that when the user tabs off the menu it does the megaHoverOut($(this).parent(‘li’)); function?

you can see the nav at the following addess: http://bit.ly/9FPOoi

thanks

2

I have since changed the code to:

$("ul#mainnav li").hoverIntent(config).children('a').focus(function () {
																		 
		//need to trigger megaHoverOver
		megaHoverOver($(this).parent('li'));
		
				
	}).blur(function () {
		
		
		if( $(this).closest("#mainnav").length==0){
			//need to trigger megaHoverOver
			megaHoverOut($(this).parent('li'));
		}
		
		
	});

but still no luck…

can anyone help me on this?