jQuery下拉菜单

Question

我在使用jquery和css创建下拉菜单时遇到问题。 这是我的html

<nav class="topNav">
        <ul>
            <li>
                <a href="#menu" class="menu-toggle"><img src="img/main.png" /></a>
            </li>
            <li>
                <a href="#social" class="menu-toggle"><img src="img/social.png" /></a>
            </li>
        </ul>
    </nav>
    <div class='cssmenu' id="menu">
        <ul>
            <li class='active'>
                <a href='index.html'><span>Home</span></a>
            </li>
            <li class='has-sub'>
                <a href='#'><span>Products</span></a>
                <ul>
                    <li class='has-sub'>
                        <a href='#'><span>Product 1</span></a>
                        <ul>
                            <li>
                                <a href='#'><span>Sub Item</span></a>
                            </li>
                            <li class='last'>
                                <a href='#'><span>Sub Item</span></a>
                            </li>
                        </ul>
                    </li>
                    <li class='has-sub'>
                        <a href='#'><span>Product 2</span></a>
                        <ul>
                            <li>
                                <a href='#'><span>Sub Item</span></a>
                            </li>
                            <li class='last'>
                                <a href='#'><span>Sub Item</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href='#'><span>About</span></a>
            </li>
            <li class='last'>
                <a href='#'><span>Contact</span></a>
            </li>
        </ul>
    </div>
    <div class='cssmenu' id="social">
        <ul>
            <li>
                <a href='http://www.facebook.com'><img src="img/facebook.png" /></a>
                <a href='#'><img src="img/linked.png" /></a>
                <a href='#'><img src="img/twitter.png" /></a>
            </li>
        </ul>
    </div>

这是我的jQuery

$(document).ready(function(){
            $(".cssmenu ul").hide();
            var id;
            $("a.menu-toggle").mouseenter(function(){
                id=$(this).attr("href");
                list=$($(this).attr("href")).children().first();
                list.stop(true,false).slideDown("fast");
            });
             $("a.menu-toggle").mouseleave(function(){
                     list=$(id).children().first();
                     list.stop(true,false).slideUp("fast");
             });
        });

这是我的导航栏的视频

https://drive.google.com/file/d/0B0sCu8aj8zu2SnBuSl9BRmQ1SEE/edit?usp=sharing

当我尝试移至下拉菜单时，它会向上滑动。如果我删除了定位标记的mouseleave事件，则可以移至下拉菜单，但它们开始堆叠。

谢谢您的任何帮助。

Answer 1

尝试

$(document).ready(function(){
    $('.cssmenu ul').hide();
    $('a.menu-toggle').hover(function () {
        var $target = $($(this).attr('href')).children('ul');
        console.log($target.get())
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown(500);
    }, function () {
        var $target = $($(this).attr('href')).children('ul');
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('.cssmenu > ul').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });

});

演示： 小提琴