jQuery-延迟下拉菜单

嗨
我有3个菜单，其中一个包含3个子菜单，当我将鼠标移到子菜单的父菜单上时，它将扩展div元素，但是，当我将鼠标移到子菜单上时，扩展的div元素无法保持，如何修复它？谢谢

<div id="wrap">
    <div id="menu">
        <ul>
            <li><a href="#">Item A</a></li>
            <li><a class="sub" href="#">Item B</a>
                <ul>
                    <li><a href="#">Item B1</a></li>
                    <li><a href="#">Item B2</a></li>
                    <li><a href="#">Item B3</a></li>
                </ul>           
            </li>
            <li><a href="#">Item C</a></li>
        </ul>
    </div>
</div>

$(function(){
    $('#menu > ul > li > a.sub').hover(
        function() {
            $('div#wrap').animate({'height': '200px'});
        },

        function() {
            $('div#wrap').animate({'height': '100px'});
        }
    );  
);

$（函数（）{
$（“#menu>ul>li>a.sub”）。悬停(
函数（）{
$（'div#wrap'）。设置动画（{'height'：'200px'）；
},
函数（）{
$（'div#wrap'）。设置动画（{'height'：'100px'）；
}
);  
);

为什么要绑定到

a

元素。如果绑定到

li

元素，鼠标悬停将计算它的所有子菜单（因此也包括下拉菜单）。

因为我希望包含子菜单的菜单具有“hover（）”功能