Take the 2-minute tour ×

I am trying to create a jQuery nav menu where it slides down to show child UL when hover and fadeout when mouse is moved off and I have the following code which acts very different in different browsers.

Hoping you guys can spot the problem.

 // menu effects
 this.navLi = jQuery('nav ul li').children('ul').hide().end();
  this.navLi.hover(function() {
   // mouseover
  jQuery(this).find('> ul').stop(true, true).slideDown(300);
  }, function() {
   // mouseout
   jQuery(this).find('> ul').stop(true, true).fadeOut(300);   

IE7 and 8 slide and fadeout works FF slide works fadeout does not work Chrome slide works only first time and second time it doesn't work and fadeout does not work at all

Safari same as Chrome as they are both webkit...

Let me know if you guys know why..most appreciated.

share|improve this question
Ok I solved it...it was because prior to adding jQuery effect, there is a declared "display:none" on the children UL so now with jQuery I need to first set the display:block to the child UL and then call the hide() function...that fixed it... –  Rick Dec 2 '10 at 7:56

1 Answer 1

Most likely the problem is your initial selector. It should be jQuery('#nav ul li') if nav is an element id or jQuery('.nav ul li') if it's a class. See a stripped down example based on your code here.

share|improve this answer
thanks for the reply but no, it is not the selector...Recall that it works in all browsers but just some it doesn't work on second hover and some the fadeout doesn't work. thanks for trying though.. –  Rick Dec 2 '10 at 5:16

Your Answer


