jQuery Dropdown Mouseout only when outside of the div

Question

Problem

The MouseOut should only go out when the user goes outside the DIV. So they can hover over the links etc. It just stays expanding it does not go back

JS Fiddle and DEMO (http://jsfiddle.net/GHaL7/3/)

jQuery

$(document).ready(function () {
    $("#hoverButton").mouseover(function () {
        $('div.hoverMenu').slideDown(2000)
    });
    $("div.hoverMenu").mouseout(function () {
        $('div.hoverMenu').slideUp(2000)
    }); 
});

CSS/HTML

<style type="text/css">
.grooveKhaleelMenu{position:relative;z-index:10000}
.hoverMenu{display:none;width:233px;height:350px;position:absolute;top:26px}
div.hoverMenu ul li{margin-top:2px;margin-bottom:2px}
div.hoverMenu ul li a span{font-size:16px !important}
.nav_zone{float:left;height:24px;margin:0;padding:0;position:relative;z-index:10000}
.nav_menu li{float:left;margin-right:1px;overflow:hidden;width:233px;height:24px;display:block}
.nav_menu a{display:block;margin-top:0px;padding-bottom:2px;text-decoration:none;font-size:18px}
.newshop{position:relative;z-index:700}
.grooveKhaleelMenu li, .grooveKhaleelMenu li a{color:#fff;text-align:center}
.blackLink{background:#000}
.blackLink:hover{background:#525252}
.redLink{background:#d40f20}
.redLink:hover{background:#e82e22}
</style>




<div class="shoulders topofthedress">
    <div class="nav_zone">
        <nav>
            <ul class="nav_menu grooveKhaleelMenu">
                <li class="blackLink" id="hoverButton"><a href="/shop" title="Shop all"><span>SHOP</span></a></li>
                <div class="hoverMenu">
                    <ul>
                        <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                                <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                                <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                                <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                                <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                                <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                        <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li>
                        <li class="redLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Sale Cat</span></a></li>
                    </ul>
                </div>
                <li class="blackLink"><a href="/shop/cat"><span>Shop Cat</span></a></li>
                <li class="blackLink"><a href="/shop/cat"><span>Shop Cat</span></a></li>
                <li class="redLink"><a href="/shop/cat"><span>Sale Cat</span></a></li>
            </ul>
        </nav>
    </div>
</div>

Answer 1

Why you dont use slideUp() in your script?

possible solution: http://jsfiddle.net/GHaL7/23/