Jquery submenu display problem [closed]

Question

I'm using default wp menu and I added some jquery for drop down slide effect. My problem comes when I hover <li> item because it displays all sub-menus in the same time.

Here is my Jquery which I added:

    $("#mine_menu ul.menu ul").css({ display: 'none' });
$("#mine_menu ul.menu li").hover(function() {
    $(this).find('ul.sub-menu')
        .stop(true, true).delay(200).animate({ "height": "show", "opacity": "show" }, 200 );
}, function(){
    $(this).find('ul.sub-menu')
        .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
});

and here is my HTML output of my wp menu https://gist.github.com/2384269

Answer 1

Instead of using the .find() method, go with .children():

$(this).children('ul.sub-menu')

I agree with userabuser, though - This question is not exactly in the scope of WPSE.

Also, since jQuery in wordpress is in no-conflict mode by default, you should make it

 jQuery(this).children('ul.sub-menu')