Problem The MouseOut should only go out when the user goes outside the DIV.

Question

0

Asked: June 10, 20262026-06-10T00:17:47+00:00 2026-06-10T00:17:47+00:00

Problem The MouseOut should only go out when the user goes outside the DIV.

0

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>