<script language="javascript">  
      var ul = document.getElementById("ul");  
var lis = ul.getElementsByTagName("li");
for ( var i=0,len=lis.length; i <len; i++) {
 (function(){
     lis[i].onmouseover = function(){this.className ="on";};   
     lis[i].onmouseout = function(){this.className="";};
  })(i);
}
</script> 

<div id="main-menu">
                    <ul class="nav">
                        <li id="li-index" ><a href="index.html">首页</a></li>
                        <li id="li-info"><a href="#">城市情报</a></li>
                        <li id="li-map" ><a href="#">情绪地图</a></li>
                        <li id="li-shortcut" ><a href="#">休闲快捷</a></li>
                        <li id="li-vogue" ><a href="#">时尚中人</a></li>
                        <li id="li-other" ><a href="#">其他栏目</a></li>
                    </ul>
                    <!-- End subnav -->
                </div>