css菜单问题? - Web 开发 / HTML(CSS)

css制作的弹出菜单，鼠标移出后菜单消失，我现在想让鼠标移出后菜单保留。就像伊利公司（www.yili.com)一样。
是不是要改菜单弹出的js或css代码。代码如下：就是不知如何改?
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].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}
  sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");}
  }
}
window.onload=menuFix;
css代码如下：
#nav {margin:20px;1ine-height: 24px;list-style-type: none;}
#nav a {display: block;padding:0 10px;text-align:center;}
#nav a:link {color:#ffffff;text-decoration:none;}
#nav a:visited {color:#ffffff;text-decoration:none;}
#nav a:hover {color:#ffffff;text-decoration:none;}
#nav li {float: left;position: relative;}
#nav li a:hover{}
#nav li ul {margin:0; line-height: 40px;list-style-type: none;text-align:left;left: -999em;position: absolute;float:left;}
#nav li ul li{float: