CSS/JQuery Advice: Display hover over link and toggle div

Question

I have a link (horizontal nav bar item) and when the user hovers over it another div should slideDown just below. .toggle doesn't work as it continuously toggles the div when you are hovering over the link.

I tried to write my own using mouseover and mouseOut but it's too sensitive and the div flips back and forth between displays (block, none).

Here's my jQuery:

    $(".topHorzNavLink").mouseover(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideDown('slow');

    }

});

$(".topHorzNavLink").mouseout(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideUp('slow');

    }

});

Here's the HTML (I know, ugh, it will be dynamic at some point):

<nav id="topHorzNav">

            <div id="topHorzNavLinks">

                <ul>
                    <li><p class="topHorzNavLink" linkItem="link1"><a href="#">Link 1</a></p></li>
                    <li><p class="topHorzNavLink" linkItem="link2"><a href="#">Link 2</a></p>
                <div id="hoverContainer">
                    <div class="colContainer">
                        <div class="colContainer">
                            <div class="colContainer">
                                <div class="colContainer">
                                    <div class="colContainer">

                                        <!--col 1-->
                                        <div class="col">
                                            <p class="colHeader">Heading 1</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col2 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 2</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col3 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 3</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col4 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 4</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col5 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 5</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link3">Link 3</a></p></li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link4">Link 4</a></p></li>
                </ul>

            </div>

            <div id="topHorzNavRight">&nbsp;</div>

        </nav>
        <!--end top horz nav items-->

Answer 1

You need to use the .stop() function to clear the queued animations otherwise every time you move in and out of the <li> more animations will be triggered. The other problem is that you are using mouseover() which is triggering the animation even when the pointer is inside the child elements . mouseout() also creates events that bubble up when the pointer leaves child elements. You are better off using .mouseenter() and .mouseleave() .

Here is a demo using HTML5 and jQuery 1.7.2. I have to say your example is very verbose!

HTML

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
            <div>
                <!--col 1-->
                <section>
                    <header><h1>Heading 1</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <!--col2 -->
                <section>
                    <header><h1>Heading 2</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 3</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
            </div>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>​

CSS

ul {
    width:150px;
}
li {
    border:1px dashed lightgrey;
}
li > div {
    display:none;
}
h1 {
   font-size:14px;
}

​section {
    padding-bottom:8px;
    border-bottom:1px dashed lightblue;
}

​​​

JavaScript

$('li').on({
    mouseenter: function() {
        $(this).find('div:first').stop(true, true).slideDown('slow');
    },
    mouseleave: function() {
        $(this).find('div:first').stop(true, false).slideUp('slow');
    }
});​

Answer 2

You'd better use the hover() function. It has two parameters, each one is a function. The first one is for the mouseover event, the second is for the mouseout event.

I tried the following code and it worked:

$(function() {  
$('#nav-list>li').hover(function(e) {
    $(this).children('ul').slideDown(300);
}, function(e) {
    $(this).children('ul').slideUp(200);
});
});