求一个2级菜单的做法

Question

鼠标指上去会有2级菜单
（这个做好了，但鼠标移开后2级菜单消失）
现在要求点击1级菜单之后2菜单定住不动，直到鼠标移到其他1级菜单上出现那边的2级菜单，然后这边的一级菜单消失
请问这个如何实现
我新手8懂请各位大虾指教附上原先的JS：
<script type="text/javascript">
<!--
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
 
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
window.onload=menuFix;//-->
</script>