请帮忙写个Javascript

请帮忙写个Javascript可以实现上面的下拉菜单：

要求：

1.当鼠标点击“菜单A”时才出现

2.当鼠标移动到“二级菜单1”或“二级菜单3”时，三级菜单会隐藏

3.当点击网页空白处时，“二级菜单”和“三级菜单”都会隐藏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多级无限级菜单</title>
<link href="yyui.css" rel="stylesheet" type="text/css">
</head>
<body style="padding:30px; ">
<style type="text/css">
.yyui_menu1 { height:35px; line-height:35px; font-size:15px; background-color:#f2f2f2; }
 .yyui_menu1 ul,.yyui_menu1{list-style:none}
.yyui_menu1 li { float:left; position:relative;} 
.yyui_menu1 li a { display:block; line-height:35px; text-decoration:none; padding:0px 20px; color:#333333;   }
.yyui_menu1 li a:hover {  background:#EFEFEF; }
.yyui_menu1 li a.more:after{content:" »";}
 
.yyui_menu1 li ul { position:absolute; float:left; width:150px; border:1px solid #D2D2D2; display:none; background-color:#FFFfff; z-index:9999;}
.yyui_menu1 li ul a { width:110px;text-decoration:none; color:#333333;}
.yyui_menu1 li ul a:hover { background:#f2f2f2;}
 
.yyui_menu1 li ul ul{ top:0;left:150px;}
</style>
<ul class="yyui_menu1">
  <li><a href="#">菜单一</a>
    <ul class="one">
      <li><a href="#">菜单一</a></li>
      <li><a href="#">菜单二</a></li>
      <li><a href="#">菜单三</a></li>
      <li><a href="#">菜单四</a></li>
      <li><a href="#" class="more">菜单五</a>
        <ul class="two">
          <li><a href="#">菜单一</a></li>
          <li><a href="#">菜单二</a></li>
          <li><a href="#">菜单三</a></li>
          <li><a href="#">菜单四</a></li>
          <li><a href="#" class="more">菜单五</a>
            <ul class="three">
              <li><a href="#">菜单一</a></li>
              <li><a href="#">菜单二</a></li>
              <li><a href="#">菜单三</a></li>
              <li><a href="#">菜单四</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('.yyui_menu1 li').click(function (e) {
        e.stopPropagation();
        $(this).children("ul").toggle();
    });
</script>
</body>
</html>

Css:

ul li {

list-style: none;

}

li ul{

display: none;

}

.plus{

list-style-image: url(img/plus.gif);

}

.minus{

list-style-image: url(img/minus.gif);

}

Html:

<ul>

<li>主题市场

<ul>

<li>运动派

<ul>

<li>三级菜单a</li>

<li>三级菜单b</li>

<li>三级菜单c</li>

<li>三级菜单d</li>

</ul>

</li>

<li>有车族

<ul>

<li>三级

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

Js：

$(function(){

//要给所有具有ul的li添加+

$("li:has(ul)").addClass("plus")

//添加点击事件

.click(function(e){

//阻止冒泡

e.stopPropagation();

//console.log(this,$(this).children().length);

if($(e.target).children().length){//给事件源添加点击事件，没必要点击的不添加

/*if($(this).hasClass("plus")){

$(this).removeClass("plus").addClass("minus");

}else{

$(this).removeClass("minus").addClass("plus");

}*/

$(this).toggleClass("minus");//有这个类名删掉没有的话加上

$(this).children().slideToggle();//展开和关闭子元素

}

//return false;

})

</script>
希望能帮到你，可以的话请采纳