javascript - 关于JS动画显示下拉菜单的问题~~求解决~~非常感谢~-PHP中文网问答

想实现效果是客户鼠标移动到公司产品上后显示隐藏的产品A,B,C
然后鼠标移动到非产品A,B,C区域也隐藏掉。但是客户鼠标移动到
产品A,B,C区域后不能隐藏，客户鼠标离开产品A,B,C后再隐藏
问题是显示隐藏的产品A,B,C以后不能让它一直显示！！！求大神解决
看着很简单的效果~就是实现不了郁闷

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        .ul{
            position: absolute;
            display: none;
           }
    </style>
</head>
<body>
    <a href="#">公司产品</a>
    <p class="ul">
        <ul>
            <li>产品A</li>
            <li>产品B</li>
            <li>产品C</li>
        </ul>
    </p>
    <script>
    $("a").mouseover(function(){
        $(".ul").slideDown(1000);
    })
     
     $("a").mouseout(function(){
        $(".ul").slideUp(1000);
    })
     //想实现效果是客户鼠标移动到公司产品上后显示隐藏的产品A,B,C
     //然后鼠标移动到非产品A,B,C区域也隐藏掉。但是客户鼠标移动到
     // 产品A,B,C区域后不能隐藏，客户鼠标离开产品A,B,C后再隐藏
     //问题是显示隐藏的产品A,B,C以后不能让它一直显示！！！求大神解决
</script>
</body>

</html>

<head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js"></script> <style> .box { position: absolute; display: none; } </style> </head> <body> <p class="ul"> <a href="#">公司产品</a> <p class="box"> <ul> <li>产品A</li> <li>产品B</li> <li>产品C</li> </ul> </p> </p> <script> $(".ul").mouseenter(function(){ $(this).children('.box').slideDown(1000); }); $(".ul").mouseleave(function(){ $(this).children('.box').slideUp(1000); }); </script> </body>