1

问题

只有当用户离开 DIV 时，MouseOut 才会熄灭。所以他们可以将鼠标悬停在链接等上。它只是保持扩展它不会返回

JS Fiddle 和 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>
4

1 回答 1

2

为什么你不在脚本中使用 slideUp()？

可能的解决方案：http: //jsfiddle.net/GHaL7/23/

于 2012-08-08T10:53:58.390 回答