jQuery Drop Down Hover Menu

Question

I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.

http://jsdo.it/mretchin/4Ewk

It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.

Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.

Thanks for helping! I appreciate it!

Should I just give up and make it work in CSS?

Answer 1

You can do something like this:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').stop(true, true).slideDown('medium');
        },
        function() {
            $('ul.file_menu').stop(true, true).slideUp('medium');
        }
    });
});

And here an example with sub-menus:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').slideDown('medium');
        },
        function() {
            $('ul.file_menu').slideUp('medium');
        }
    );

    $(".file_menu li").hover(
        function() {
            $(this).children("ul").slideDown('medium');
        },
        function() {
            $(this).children("ul").slideUp('medium');
        }
    );
});