JavaScript实现向右伸出的多级网页菜单-CSDN博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">                      
<html lang="en">                      
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">                          
<title>接触角测定仪</title>
<style type="text/css">*{padding:0;margin:0; } li{  list-style:none; } ul{  background:rgb(200,13,34);  width:250px;    float:left;     } b{  display:block;  width:500px;  height:40px;  background:rgb(24,122,173); } ul li{  height:32px;   }  ul li:hover{  height:32px;  background:orange;   } #nav1{  position:absolute; } #nav3{  position:relative;  left:0;    background:green;;  visibility:hidden; } 
</style>                                               
</head>                      
<body>
        <div id="nav1">
            <ul id="nav2">
                <li>文学</li>
                <li>艺术</li>
                <li>摄影</li>
            </ul>
            <ul id="nav3">
                <li>1-1</li>         
                <li>2-1</li>         
                <li>3-1</li>     
            </ul>
        </div>
<script type="text/javascript">
 var focus=false;
 var showdiv=document.getElementById("nav3");
    showdiv.onmouseover=function(){
       focus=true;
          this.style.visibility="visible";
    }
     showdiv.onmouseout=function(){
     focus=false;
       this.style.visibility="hidden";
    }
function bindToggle(index,flag){
     var showdiv=   document.getElementById("nav3");                            
     var delayshow= function(){
     if(flag ==1 ){
         showdiv.style.visibility="visible";
         showdiv.style.top=index*32+"px";
     }else {
        if(!focus){
            showdiv.style.visibility="hidden";
        }     
     }
   }
   return function(){ 
   setTimeout(delayshow,150);
   } 
}
   var menu=document.getElementById("nav2").childNodes;
   var index=0;
   for(var i=0;i<menu.length;i++){
    if(1==menu[i].nodeType){
   
     menu[i].onmouseover=  bindToggle.call(menu[i],index,1);
        menu[i].onmouseout=  bindToggle.call(menu[i],index,0);
          index++;
    }        
   } 
</script>                                                
</body>                      
</html>