jQuery Menu Help

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 whic开发者_JAVA技巧h acts very different in different browsers.

Hoping you guys can spot the problem.

    jQuery(document).ready(function(){ 
 // 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.

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.