Question

I have the following hover script that handles the sliding down of sub menus in my navigation bar:

$j('body').ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').slideDown("slow");
    },
        function() {
            $j(this).find('.sub-menu').slideUp("slow");
        });
});

At present the slide down is activated whenever the user hovers over the .menu-item div, as expected. However, I would only like the slide down to be activated when the user hovers over a child div contained within the .menu-item div, namely .bottom_nav.

HTML is in the form:

<li class="menu-item">
<div class="box">
    <div class="top_nav">
    </div>
    <div class="clear">
        <div class="bottom_nav">
            <div class="left_nav">
            </div>
            <div class="center_nav">
                <a href="http://soteriabrighton.co.uk/news/">news</a>
            </div>
            <div class="right_nav">
            </div>
            </a>
        </div>
    </div>
    <ul class="sub-menu">
        <li>
        <div class="box">
            <div class="top_nav">
            </div>
            <div class="clear">
                <div class="bottom_nav">
                    <div class="left_nav">
                    </div>
                    <div class="center_nav">
                        <a href="http://soteriabrighton.co.uk/news/events/">events</a>
                    </div>
                    <div class="right_nav">
                    </div>
                    </a>
                </div>
            </div>
            </li>
        </ul>
        </li>

You can see the nav item in action on this page, specifically on the ‘news’ item, which has a dropdown for an events page. You will need to enter the following credentials as the site is under development:

username:guest

password:stackoverflow

Answer 1

I sorted this by adding the following:

$j('.sub-menu').hover(function() {
    $j(this).stop().slideDown("fast");
}, function() {
    $j(this).stop().slideUp("slow");
});