<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
oDiv{ 100px; height:100px; background:#FF0000; position:absolute; left:0px; top:20px;}
ul li{ list-style:none;}
a{ text-decoration:none;}
#nav{ margin:0 auto; 520px;}
#nav li{ float:left; 120px; text-align:center; background:#CCCCCC; display:block; margin-right:10px; height:30px; line-height:30px; text-decoration:none; font-size:14px; font-weight:bold;}
#nav li a{ display:block;}
#nav li .list{ height:0px; position:absolute; 120px; overflow:hidden;}
#nav li .list li{ background:#003399; border:none; height:28px; line-height:28px; color:#FFFFFF; display:block;}
</style>
<script language="javascript">
window.onload=function()
{
var oDiv=document.getElementById("oDiv");
//startMove(oDiv);
var oNav=document.getElementById("nav");
var oLi=oNav.children;
for(var i=0;i<oLi.length;i++)
{
oLi[i].onmouseover=function()
{
var oUl=this.getElementsByTagName("ul")[0];
oUl.style.height="auto";
var height=parseInt(getStyle(oUl,"height"));
oUl.style.height="0px";
startMove(oUl,height);
}
oLi[i].onmouseout=function()
{
var oUl=this.getElementsByTagName("ul")[0];
//oUl.setAttribute("style","display:none");
oUl.style.height="auto";
var height=parseInt(getStyle(oUl,"height"));
startMove(oUl,0);
}
}
}
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/>
<div id="oDiv"></div>
<ul id="nav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">关于我们</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li>
<a href="#">新闻中心</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li>
<a href="#">产品展示</a>
<ul class="list">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
</ul>
<script language="javascript" >
var i=0;
function startMove(obj,iTarget)
{
clearInterval(obj.iTimer);
obj.iTimer=setInterval(function(){
var iCur=parseInt(getStyle(obj,"height"));
var iSpeed="";
iSpeed=((iTarget-iCur)/8);
if(iSpeed>0)
{
iSpeed=Math.ceil(iSpeed);
}
else
{
iSpeed=Math.floor(iSpeed);
}
if(iCur==iTarget)
{
clearInterval(obj.iTimer);
}
else
{
obj.style["height"]=iCur+iSpeed+"px";
}
},10)
}
//获取样式
function getStyle(obj,attr)
{
var v="";
if(obj.currentStyle)
{
v=obj.currentStyle[attr];
}
else
{
v=getComputedStyle(obj,false)[attr];
}
return v;
}
</script>
</body>
</html>