鼠标移入就显示弹框，移出弹框就消失

html:

<span style="font-size:14px;"> <div id="menu">
<div id="menuBtn">
<div class="bor">
<img src="img/menu.png" />
<a href="#">菜单</a>
</div>
</div>
<ul id="menuList">
<li><a href="#">香蕉</a></li>
<li><a href="#">苹果</a></li>
<li><a href="#">鸭梨</a></li>
<li><a href="#">橙子</a></li>
</ul>
</div></span>css:
<span style="font-size:14px;">#menu{
width:8.33%;
float:right;
margin-top:0;
}
#menuBtn{
width:100%;
background-color:#7D9599;
}
#menuBtn img{
margin-left:24.16%;
margin-top:7%;
}
#menuBtn a{
color:#fff;
font-family:"Microsoft YaHei";
font-size:1em;
margin-left:1%;
margin-top:0.4%;
position:absolute;
text-decoration:none;
}
#menuList{
list-style:none;
margin-top:0;
}
#menuList li{
width:100%;
background-color:#7D9599;
margin-top:1%;

}
#menuList li:hover{
background-color:#9CC0CC;
}
#menuList li:visited{
background-color:#4B5E66;
}
#menuList li a{
text-decoration:none;
color:#fff;
font-family:"Microsoft YaHei";
font-size:1em;
margin-top:0.4%;
padding-left:2%;
position:absolute;
}
#menuBtn .bor{
width:100%;
}</span>

jquery:
<span style="font-size:14px;">var menuBtn = document.getElementById("menuBtn");
var menuList = document.getElementById("menuList");</span><pre name="code" class="html"><span style="font-size:14px;">//移入移出菜单
$("#menuList").hide();
menuBtn.<span style="color:#CC0000;">onmouseover </span>= function () {
if (menuList.style.display === "none") {
menuList.style.display = "block";
}
$("#menuBtn").attr('style', 'background-color:#9CC0CC;height:19.60%;');
}
menuBtn.<span style="color:#CC0000;">onmouseleave </span>= function () {
if (menuList.style.display === "block") {
menuList.style.display = "none";
}
$("#menuBtn").attr('style', 'background-color:#7D9599;height:19.60%;');
}
$("#menuList").mouseover(function () {
$("#menuList").show();
menuList.style.display = "block";
});
$("#menuList").mouseleave(function () {
$("#menuList").hide();

});
</span>