jQuery - 延迟下拉菜单

Question

您好
我有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'});
        }
    );  
);

Answer 1

为什么要绑定到a元素。如果绑定到li元素，则鼠标悬停将计入其所有子节点（因此还包括下拉菜单）。