JQuery中多个hover事件怎么才能只处理一个，其他的忽略

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="jquery.js"></script>
    <style>
    .menu {width:100px;height:20px;border:solid 1px #999;background:#cea;position:relative;}
    .menuover {width:100px;height:20px;border:solid 1px #999;background:#ffc;position:relative;}
    .submenu {width:100px;height:200px;border:solid 1px #999;background:#ddd;position:absolute;left:-1px;top:20px;display:none;}
    </style>
    <script>
    $(document).ready(function()
    {
        $(".menu").hover(function()
        {
            $(".submenu").slideDown('slow');
        },function()
        {
            $(".submenu").slideUp('slow');
        });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="menu">
        <div class="submenu">
            hi<br>
            hi<br>
            hi<br>
            hi<br>
            hi<br>
            hi<br>
            hi<br>
            hi<br>
            hi<br>
        </div>
    </div>
    </div>
    </form>
</body>
</html>
鼠标移上到menu上n次，就会往下拉n次，感觉不好，希望能够只执行下拉事件，请高手指教

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
        <style>
        .menu {width:100px;height:20px;border:solid 1px #999;background:#cea;position:relative;}
        .menuover {width:100px;height:20px;border:solid 1px #999;background:#ffc;position:relative;}
        .submenu {width:100px;height:200px;border:solid 1px #999;background:#ddd;position:absolute;left:-1px;top:20px;display:none;}
    </style>
        <script>
        $(document).ready(function()
        {
            $(".menu").hover(function()
            {  
        $(".submenu").stop(false,true);
                $(".submenu").slideDown('slow');
            },function()
            {
        $(".submenu").stop(false,true);
                $(".submenu").slideUp('slow');
            });
        });
        </script>
    </head>
    <body>
        <form id="form1">
        <div>
        <div class="menu">
            <div class="submenu">
                hi<br>
                hi<br>
                hi<br>
                hi<br>
                hi<br>
                hi<br>
                hi<br>
                hi<br>
                hi<br>
            </div>
        </div>
        </div>
        </form>
    </body>
    </html>