Question

I am trying to animate my wordpress sub-menu with Jquery.

Here’s what I am trying to mimic: http://money.co.uk

Here’s what I have so far:

    $("#main-nav li").hover(function () {
    $(this).children('.sub-menu').slideToggle("fast");
  });

http://jsfiddle.net/bNeDh/

It seems to be the reverse of what I want, I’d like the children to slide down when user mouseover the parent.
My jquery isn’t great at all, can anyone provide the answer?

Answer 1

I have modified your CSS a bit…
If you find this (or any) answer useful Accept it by clicking checkmark.

You probably want something like this:

Fiddle Here

$("#main-nav li").hover(function () {
$(this).children('.sub-menu').slideDown("fast");
},function(){
$(this).children('.sub-menu').slideUp('fast');
});