没等移到二级菜单就消失了

想实现二级菜单，
在ＣＳＳ中有；
#templatemo_left_link
{
margin-top:0px;
margin-left:25px;
line-height:33px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#ffffff;
}


#templatemo_left_link ul
{
width:70px;
list-style:none;
line-height:33px;
margin:0;
padding:0;
}

#templatemo_left_link ul li
{
position:relative;

display:block;
}

#templatemo_left_link ul li ul
{
display:none;
position:absolute;
width:70px;
float:left;
margin:0;
padding:0;
left:68px;
top:0px;
text-align:left;
list-style-type:none;
border:1px solid rgb(170,170,170);
background-color:rgb(238,238,238);
line-height:28px;
z-index:100;

}

#templatemo_left_link ul li ul li
{
float:left;
margin:0;
padding:0;
width:68px;
text-align:left;
border-bottom:1px solid rgb(204,204,204);
border-top:1px solid rgb(255,255,255);
}

在ＨＴＭＬ中有：
<script type="text/javascript">

function showUL(ulId)
{
//alert(ulId);
document.getElementById(ulId).style.display = "block";
//alert("s");
}

function hiddenUL(ulId)
{
document.getElementById(ulId).style.display = "none";
}
</script>
...
<div id="templatemo_left_link">
  <ul>
  <li>
  <a href="#">主页</a><br/>
  </li>
  <li>
  <a href="#" onmouseover="showUL('profile')" onmouseout="hiddenUL('profile')">中心概况</a><br/>
  <ul id="profile" onmouseover="showUL('this.id')" onmouseout="hiddenUL(this.id)">
  <li><a href="#">中心简介</a></li>
  <li><a href="#">领导致辞</a></li>
  </ul>
  </li>
  <li>
  <a href="#">科研方向</a><br/>
  </li>
  ...
  </ul>

可是现在发现鼠标放在“中心概况”上时可以出现二级菜单“中心简介”和“领导致辞”，但是鼠标一移动，还没等移动到二级菜单“中心简介”和“领导致辞“上面，二级菜单就小时了，请问这是为什么，该如何解决

------解决方案--------------------
不知道是不是你的a元素没有高度和宽度，所以默认只有字体那么大，而你的li比a大，你的时间监听在a元素上面，所以离开字体的时候就不算是out事件了 不知道是否明白？不明白可以加我Q 945332077