导航条式下拉菜单(mouseout,mouseover)

<style>
*{
   margin:0px;
   padding:0px;
}
#nav{
   list-style-type:none;
   font-size:12px;
}
#nav li{
   float:left;
   width:80px;
   position:relative; /*控制下拉框的位置，让它在 “菜单二”的“LI“下面活动*/
   height:22px;    /*这个一定要定义的，“菜单”一栏的高度，也是onmouseover和onmouseout使用的范围*/
   padding-top:4px;
}
#nav li ul{
   display:none;     /*让菜单二下面的“ul”不要显示，配合onmouseover和onmouseout显示*/
   position:absolute;   /*让菜单二下面的下拉“UL”显示，并不要把菜单栏撑大（撑大效果见下面，我会贴出来的，哈哈）*/
   top:22px;   /*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离上面多少*/
   left:0px;    /*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离左边多少*/
   border:1px solid #C4E4FF;
}
#nav li ul li{
   float:left;
   background-color:#F7FCFF;
   padding:2px 2px 2px 8px;
   width:80px
}
#nav li:hover ul , #nav li.over ul{
   display:block;                       /*显示下拉框*/
}
</style>
<script>
   function viewNav(){
   navRoot=document.getElementById("nav").getElementsByTagName("li");//找到id为nav，下面所有LI标签
   for (i=0; i< navRoot.length;i++){
      navRoot[i].οnmοuseοver=function(){  //在javascript中不能直接设置元素的style，必须通过className来设置
      this.className = " over";          //给LI标签加上css类“over”，加空格是为了防止之前已经定义css类
      }
      navRoot[i].οnmοuseοut=function(){
      this.className=this.className.replace(" over",""); //去除之前加上的“over”，注意前面有空格
      }
   }
} 
window.οnlοad=viewNav;
</script>
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" background="attachments/month_0706/320076314249.gif">
   <tr>
      <td width="22"> </td>
      <td>
      <ul id="nav">
         <li><a href="#">信息中心</a></li>
         <li><a href="#">信息分类</a>
      <ul>
         <li><a href="#">协会新闻</a></li>
         <li><a href="#">通知安排</a></li>
         <li><a href="#">协会安排</a></li>
      </ul>
        </li>
         <li><a href="#">返回</a></li>
      </ul>
      </td>
      <td> </td>
      <td> </td>
      <td> </td>
   </tr>
</table>