一个简单的javascript+css 下拉菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >

< style  type ="text/css" > ...
body{...}{
        background:#E2F0F9 ;
        margin:0;
        padding:0;
        font-size:13px;
    }

    #warpper {...}{
        width:790px;
        height:420px;
        margin:0px auto;
        border:1px black solid;
        position:relative;
    }
    
    #content {...}{
        background:#E2F0F9;
        position:absolute;
        top:0px;
        left:0px;
        width:790px;
        height:420px;        
        overflow:hidden;
    }

    #warpper {...}{
        position:absolute;
        margin:-200px 0 0 -395px;
        *margin:-200px 0 0 -395px;
        left:50%;
        top:50%;
    }

    .actualContent{...}{
        width:100%;height:400px;
        background:green;
    }

    ul{...}{
        list-style:none;
        padding:0px;
        margin:0px;
        text-align:center;
    }
    #menuTwo {...}{
        position:absolute;
        top:5px; 
        left:20px; 
        z-index:20;
        width:100%; 
    }
    .sub{...}{
        float:left;
    }
    #menuTwo li{...}{
        background:#3167b1;
        height:25px;
        width:80px;
    }
    .subTwo{...}{
        top:0px;
    }
    .subTwo li{...}{
        background:#3167b1;
    }
    #menuTwo a{...}{
        line-height:20px;
        color:#FFFFFF;
    }
    #menuTwo a:link {...}{
        text-decoration: none;
    }
    #menuTwo a:visited {...}{
        text-decoration: none;
    }
    #menuTwo a:hover {...}{
        text-decoration: underline;
    }
    #menuTwo a:active {...}{
        text-decoration: none;
    }

</ style >

< script  type ="text/javascript" > ...
    var test=function()...{
        alert("cccc");
    };
</ script >
</ head >

< body >
< div  id ="warpper" >
     < div  id ="content" >
     < ul  id ="menuTwo" >
         < li  class ="sub"   onmouseover ="document.getElementById('ulTest1').style.display=''"  onmouseout ="document.getElementById('ulTest1').style.display='none'" >
         < a  href ="javascript:void(0)" > 编辑 </ a >
             < ul  style ="display:none"  id ="ulTest1"  class ="subTwo" >
                 < li >< a  href ="javascript:void(0)"  onclick ="test();" > 增加 </ a ></ li >
                 < li >< a  href ="javascript:void(0)"  onclick ="test();" > 修改 </ a ></ li >
                 < li >< a  href ="javascript:void(0)"  onclick ="test();" > 删除 </ a ></ li >
             </ ul >
         </ li >
         < li  class ="sub"   onmouseover ="document.getElementById('ulTest2').style.display=''"  onmouseout ="document.getElementById('ulTest2').style.display='none'" >
         < a  href ="javascript:void(0)" > 操作 </ a >
             < ul  style ="display:none"  id ="ulTest2"  class ="subTwo" >
                 < li >< a  href ="javascript:void(0)" > 操作1 </ a ></ li >
                 < li >< a  href ="javascript:void(0)" > 操作2 </ a ></ li >
             </ ul >
         </ li >
         < li  class ="sub"  onmouseover ="document.getElementById('ulTest3').style.display=''"  onmouseout ="document.getElementById('ulTest3').style.display='none'" >
         < a  href ="javascript:void(0)" > 查看 </ a >
             < ul  style ="display:none"  id ="ulTest3"  class ="subTwo" >
                 < li >< a  href ="javascript:void(0)" > 查看 </ a ></ li >
             </ ul >
         </ li >
         < li  class ="sub"  onmouseover ="document.getElementById('ulTest4').style.display=''"  onmouseout ="document.getElementById('ulTest4').style.display='none'" >
         < a  href ="javascript:void(0)" > 打印 </ a >
             < ul  style ="display:none"  id ="ulTest4"  class ="subTwo" >
                 < li >< a  href ="javascript:void(0)" > 打印 </ a ></ li >
             </ ul >
         </ li >
         < li  class ="sub"  onmouseover ="document.getElementById('ulTest5').style.display=''"  onmouseout ="document.getElementById('ulTest5').style.display='none'" >
         < a  href ="javascript:void(0)" > 退出 </ a >
             < ul  style ="display:none"  id ="ulTest5"  class ="subTwo" >
                 < li >< a  href ="javascript:void(0)" > 退出 </ a ></ li >
             </ ul >
         </ li >
     </ ul >
     < div   style ="position:relative;top:0px; left:0px; z-index:19;" >
         < div  style ="background:#3167b1;width:100%; height:30px;" ></ div >
         < div  style ="background:#E2F0F9;width:100%; height:100px;" >
             < ul  class ="" >
                 < li ></ li >
             </ ul >
             < hr />
             < div  id ="" ></ div >
         </ div >
     </ div >
     </ div >
</ div >
</ body >
</ html >