Stop animation after hovering parent item

Question

I am using a responsive navigation menu,
which doesn’t include a drop down animation.

So I used this for the animation//

$(document).ready(function () {
$(".test").hover(function () {
    $(".sub-menu").slideToggle("slow", function () {});
    });
});

Now, when I hover over the parent item the menu slides open but once I try to hover over the child links the menu just closes.

I did a little research and tried adding .stop() after $(".sub-menu") but it still doesn't work.

My question is, Why isn't the sub menu staying open after hovering when using .stop()?

Here is a fiddle.

Answer 1

You'd need to add hover to parent li as hover on a gets released when you move onto sub nav

HTML

<DIV ID="NXVI">

    <nav>

        <ul class="menu">

            <li><a href="/">FRONT</a></li>

            <li><a href="/about">ABOUT</a></li>

            <li class="contains-sub-menu"><a class="test" href="#">RESOURCES</a>
                <ul class="sub-menu">
                    <li><a href="/overlays">Overlays</a></li>
                    <li><a href="#">Packs</a>
                        <ul class="subb-menu">
                            <li><a href="/overlay-packs">Overlay Packs</a></li>
                            <li><a href="/texture-packs">Texture Packs</a></li>
                        </ul>
                    </li>
                    <li><a href="/pngs">Pngs</a></li>
                    <li><a href="/templates">Templates</a></li>
                    <li><a href="/textures">Textures</a></li>
                    <li><a href="/wallpaper">Wallpaper</a></li>
                </ul>
            </li>

            <li><a href="/credit">CREDIT</a></li>

            <li><a href="/requests">REQUESTS</a></li>

        </ul>

    </nav>

    <a id="touch-menu" class="mobile-menu" href="#">Menu</a>

</DIV>

JS

$(document).ready(function () {
    $(".contains-sub-menu").hover(function () {
        $(".sub-menu").stop().slideToggle("slow", function () {});
    });
});

updated fiddle:http://jsfiddle.net/Varinder/eyN5A/1/

Answer 2

Try this, works in the fiddle:

$(document).ready(function () {
    $(".test, .sub-menu").hover(function () {
        $(".sub-menu").stop().slideDown("slow");
    }, function() {
        $(".sub-menu").stop().slideUp("slow");
    });
});

updated fiddle: http://jsfiddle.net/72qp5/2/