我把页面上传了http://www.cgxy.org.cn/numbergt/header.php,鼠标移动到第一个按钮上时隐藏层显示,但是鼠标移动到第二个按钮上时隐藏层不会显示,鼠标再次移动到第一个按钮时,显示效果失败。上面的地址是页面地址。下面是html、css和js代码html{overflow:hidden;} 
body{
 margin-top:0px;
 height:100%;
 overflow:auto;
}
a img{
border:0px solid;
}
/*
**
**
**header样式表
*/
.header{
width:980px;
height:78px;
background:url(../images/background/bg_all.gif);
position:relative;
}
.bowelheader{
 width:960px;
 height:78px;
 background:url(../images/background/bg_header.gif);
}
.logo{
width:100px;
height:78px;
float:left;
}
.navigation{
width:555px;
height:42px;
float:left;
margin-top:29px;
}
.one_navigation{
width:111px;
height:42px;
float:left;
}
/*
**隐藏层
*/
.assort{
width:960px;
height:400px;
background:#FC3;
position:relative;
margin-top:-5px;
}
.assort_1{
width:800px;
height:300px;
left:0px;
top:0px;
background:#CCC;
position:absolute;
display:none;
}
<!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" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/header.js"></script>
<title>无标题文档</title>
</head><body>
<center>
<div class="header">
 <div class="bowelheader">
  <div class="logo"></div>
  <div class="navigation">
   <div class="one_navigation">
    <a href="#"><img src="images/navigation/nvg1.gif" id="navigation_1" onmouseover="mouseover('1')" onmouseout="mouseout('1')"/></a>
    </div>
   <div class="one_navigation">
    <a href="#"><img src="images/navigation/nvg2.gif" id="navigation_2" onmouseover="mouseover('2')" onmouseout="mouseout('2')"/></a>
    </div>
   <div class="one_navigation">
    <a href="#"><img src="images/navigation/nvg3.gif" id="navigation_3" onmouseover="mouseover('3')" onmouseout="mouseout('3')"/></a>
    </div>
   <div class="one_navigation">
   <a href="#"><img src="images/navigation/nvg4.gif" id="navigation_4" onmouseover="mouseover('4')" onmouseout="mouseout('4')"/></a>
   </div>
   <div class="one_navigation">
    <a href="#"><img src="images/navigation/nvg5.gif" id="navigation_5" onmouseover="mouseover('5')" onmouseout="mouseout('5')"/></a>
    </div>
  </div>
 </div>
</div>
<!--
*隐藏层
*
-->
<div class="assort">
 <div class="assort_1" id="assort_1" onmouseover="showDiv('1')" onmouseout="mouseout('1')">
 <div class="assort_1" id="assort_2" onmouseover="showDiv('2')" onmouseout="mouseout('2')">
 <div class="assort_1" id="assort_3" onmouseover="showDiv('3')" onmouseout="mouseout('3')">
 <div class="assort_1" id="assort_4" onmouseover="showDiv('4')" onmouseout="mouseout('4')">
 <div class="assort_1" id="assort_5" onmouseover="showDiv('5')" onmouseout="mouseout('5')">
  
 </div>
</div>
</center>
</body>
</html>
// JavaScript Document
/*
*导航图片
*/
flags = 0;
function mouseover(id){
//更换图片
img_name = "navigation_"+id;
var img = document.getElementById(img_name);
img.src = "images/navigation/nvg"+id+"_1.gif";
//显示隐藏层
div = "assort_"+id;
var pp = document.getElementById(div);
pp.style.display= 'block';
pp.style.height = '1px';
    var divi = function(){
   var wheight = parseInt(pp.style.height);
if(wheight<=300)
 pp.style.height=(wheight+Math.ceil((335-wheight)/10))+"px";
else
        {
 clearInterval(divx);
}
}
divx = setInterval(divi,1);
if(flags>0){ 
    clearInterval(divs); 
    }
}
function mouseout(id){
//更换图片
img_name = "navigation_"+id;
var img = document.getElementById(img_name);
img.src = "images/navigation/nvg"+id+".gif";
//关闭隐藏层
flags++;
div = "assort_"+id;
var pp = document.getElementById(div);
closedd = function (){
clearInterval(divx);
dheight = parseInt(pp.style.height);
if(dheight>1){
pp.style.height=(dheight-Math.ceil(dheight)/10)+"px";
}else
{
clearInterval(divs)
pp.style.display = 'none';
}
}
  divs = setInterval(closedd,1);
}
//当鼠标移动到隐藏层时
function showDiv(id){
var div = "assort_"+id;
var ele = document.getElementById(div); 
clearInterval(divx); 
clearInterval(divs); 
ele.style.display = "block"; 
ele.style.height = 300 + "px";