JQuery reversing SlideToggle in Wordpress

Question

I have the following simple code:

jQuery( document ).ready(function( $ ) {
    $('.menu ul li:has("ul")').hover(function() {
        $('>ul', this).stop().slideToggle();
    });
});

I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.

An example can be seen here http://ng1club.everythingcreative.co.uk

Answer 1

Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.

    $('.menu ul li:has("ul")').mouseenter(function() {
        $('>ul', this).stop().slideDown();
    }).mouseleave(function() {
        $('>ul', this).stop().slideUp();
    });

Answer 2

Try this according to documentation you can use hover and apply effect on hover and hover out

jQuery('.menu ul li:has("ul")').hover(
  function() {
      jQuery('>ul', this).stop().slideDown();
  }, function() {
      jQuery('>ul', this).stop().slideUp();
  }
);

.hover()

Sample Fiddle