CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menusubmenu
user2023460
user2023460

Reputation:

Submenu displaying in jquery

Here is the testing site link.I encountered the problem that displaying the sub-menu link

In that navigation bar "why stockholm " when I hover it ,displayed the submenu also and when i hover the submenu its working normal wat i am doing wrong anyone much appreciated..

(function($){

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

    //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();
            });
        }
    });
})(jQuery);

Upvotes: 1

Views: 173

Answers (1)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

You should use children() instead of find(). When you use find('ul') it uses all ul inside your selector.

Here is working jsFiddle.

        //show subnav on hover
        $(this).mouseenter(function() {
            $(this).children("ul").stop(true, true).slideDown();
        });

        //hide submenus on exit
        $(this).mouseleave(function() {
            $(this).children("ul").stop(true, true).slideUp();
        });

Upvotes: 1

Related Questions