Question

I have this menu:
http://tabletest.orgfree.com/

for which I use this function:

function mainMenu(){
            (function($){

                //cache nav
                var nav = $("#nav");

                //add indicator and hovers to submenu parents
                nav.find("li").each(function() {
                    if ($(this).find("ul").length > 0) {
                        //$("<span>").text("^").appendTo($(this).children(":first"));
                        //show subnav on hover
                        $(this).mouseenter(function() {
                            $(this).find("ul").stop(true, true).slideDown();
                        });
                        //hide submenus on exit
                        $(this).mouseleave(function() {
                        $(this).find("ul").stop(true, true).slideUp();
                        //alert("this is an alert!");
                        });
                    }
                });
            })(jQuery);
            };

The slideDown works great but slideUp wont work and I don’t understand why, if anyone can help me with this.

thank’s.

Answer 1

It’s in your CSS. The menu is placed out of view. Remove the ‘left: -999em;’ declaration from #nav li ul:

#nav li ul {
    position: absolute;
    left: -999em; <--- REMOVE THIS
    height: auto;
    width: 14.4em;
    font-weight: normal;
    margin: 0;
}

Also, remove it from the inline styles:

<ul style="left:-999em" id="matrix">

See it working correctly: http://jsfiddle.net/c_kick/tsLPT/1/