Issue with Menu

Hi There,

I seem to be having an issue with the top menu mousover. Here is the url to the site having issues:
2014.cinefranco.com/en/

If you mouseover About Us and Get Involved, it does not allow the sub menu items to display correctly. I am not sure what has caused this to happen as its working fine in other instances of the site template for example: 2013.cinefranco.com/index.php/fr/

You help is much appreciated

Justmeyogs

Open:

templates/hot_cinema/js/jquery.hjt.nav.js

locate this code:

jQuery('.nav ul').hide();
jQuery('.nav li ul li').filter(':last-child').css('border-bottom', 'none');
jQuery('.nav li').hover(function(){
jQuery(this).find('ul:first').stop(true,true)[options.effect](options.speed);
},function(){
jQuery(this).css('position', 'relative')
.find('ul:first').stop(true,true)[options.effect](options.speed);
});

replace it with:

jQuery('.nav ul').hide();
jQuery('.nav li ul li').filter(':last-child').css('border-bottom', 'none');
jQuery('.nav li').hover(function(){
jQuery(this).find('ul:first:not(:visible)').stop(true,true)[options.effect](options.speed);
},function(){
jQuery(this).css('position', 'relative')
.find('ul:first:visible').stop(true,true)[options.effect](options.speed);
});

Ivan,

I have made the changes however it is now not turning off when I mouseout. Please see the screenshot attached. I have also attached the file you asked me to edit in case I did not do it correctly.

Thanks

Justmeyogs

Try:

jQuery('.nav ul').hide();
jQuery('.nav li ul li').filter(':last-child').css('border-bottom', 'none');
jQuery('.nav li').hover(function(){
jQuery(this).find('ul:first:not(:visible)').stop(true,true).fadeIn(options.speed);
},function(){
jQuery(this).css('position', 'relative')
.find('ul:first:visible').stop(true,true).fadeOut(options.speed);
});

Thanks Ivan,

That works great. Appreciate all your help. Any idea what caused this to happen?

Justmeyogs

jQuery version. What I gave you now is very stable code.