Question

I’m doing animated menu with jQuery (3 levels). I’m using efects slideDown and slideUp. Sometimes (but no always), when I open submenu of first main item, submenu of second main item won’t work until I refresh the page. It works OK with efects fadeIn and fadeOut, but I want to use slide.

Here is my code: http://jsfiddle.net/mcCAx/

Answer 1

The problem was the styling on your <ul class="SubStage"> element was being overridden. So, fight fire with fire by re-overwriting the styling in a callback. Your side menu shows up every time. 🙂

$(document).ready(function()
{    

    $('li.MainStage').hover(
    function()
        {
            $(this).find('ul.SubStage').slideDown('slow',function(){
                $(this).parent().find('ul.SubStage').css({overflow:"visible"});
            });
        },
    function()
        {
            $(this).find('ul.SubStage').stop().slideUp('slow');
        });

    $('li.SubStage').hover(
    function()
        {
            $(this).find('ul.Sub2Stage').slideDown('slow');
        },
    function()
        {
            $(this).find('ul.Sub2Stage').stop().slideUp('slow');
        });        
});​

Check it out here.