js implements a simple navigation drop-down list

<!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>
    body,ul{margin:0;padding:0;}
    li{width:100px;height:30px;line-height:30px;float:left;border:1px solid #000;text-align:center;background:#00FFFF;list-style:none;position:relative;}
    li div{position:absolute;top:30px;left:0;filter: alpha(opacity=0) ; opacity : 0 ; width : 100% ;     height : 0 ; overflow : hidden ; } 
    /* height: must be written here, overflow: must also be written, otherwise there will be no drop-down effect */ 
</ style > 
< script src ="perfectStartMove.js" ></ script > 
< script > 
    window.onload =  function (){
         var arrLi = document.getElementsByTagName( ' li');
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].onmouseover = function(){
                var oDiv =     this.getElementsByTagName('div')[0];
                oDiv.style.height =  ' car ' ;
                var heightVlaue = oDiv.offsetHeight;
                oDiv.style.height = 0;
                perfectStartMove(oDiv,{height:heightVlaue,opacity:100});
                
            };
            
            arrLi[i].onmouseout = function(){
                var oDiv =     this.getElementsByTagName('div')[0];
                perfectStartMove (oDiv, {height: 0 , opacity: 0 });
                
            };
        }
    };
</script>
</head>

<body>
    <ul>
        <li>
            front page
            <div>
                第三十<br />
                esfsdfds <br /> 
                dfdfd <br /> 
                fd
            </div>
        </li>
        <li>
            product
            <div>
                fcd<br />
                esfsdfds <br /> 
                dfdfd
            </div>
        </li>
        <li>
            contact us
            <div>
                读书三<br />
                ttt <br /> 
                dfdfd <br /> 
                fd
            </div>
        </li>
    </ul>
</body>
</html>
js implements a simple navigation drop-down list

Guess you like
