Ask your JavaScript questions! Pay money and get answers fast! (more info)

IE9 problem with Javascript drop-down menus JavaScript

  • SOLVED

I've got a client who has asked me about the drop down menus on this site:

http://www.shermanstravel.com/

In IE9 and other browsers (certain versions of Safari), when you hover over a drop down item in the main nav, the higlighted drop down item stays highlighted so that when you hover over others, they do not highlight.

Any thoughts about what the problem might be? (Aside from the non-valid HTML, of which I can do nothing.)

Answers (1)

2011-07-21

Christianto answers:

Since I don't have IE9, I can't test it.
But it could be because jQuery child selector bug on IE9.

You could try to change the menu/highlighted code on bottom2.js line 1905 - 1910 to:

we change '>' selector to children api..

$('ul#ST_main_nav > li').hover(
function(){
$(this).find('ul').show(); $(this).children('a').addClass('hover');
},
function(){
$(this).find('ul').hide(); $(this).children('a').removeClass('hover');
}
);


or remove all 'hover' class if mouseleave, so no menu that will stay highlighted when mouse leave the menu list..

$('ul#ST_main_nav > li').hover(
function(){
$(this).find('ul').show(); $(this).children('a').addClass('hover');
},
function(){
$(this).find('ul').hide(); $('a.hover',$('ul#ST_main_nav')).removeClass('hover');
}
);


Hope this help.