<!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>
<script>
function m_over(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "block";
mSubObj.style.backgroundColor = "#BEBEBE";
}
function m_out(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "none";
}
</script>
</head>
<body>
<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;position:relative;">1显示部分
<div style="width:50px;height:20px;display:none;position:absolute;margin:0px;padding:0px;">
<a href="1.html">1隐藏部分</a>
</div>
<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;position:relative;">2显示部分
<div style="width:50px;height:20px;display:none;position:absolute;margin:0px;padding:0px;">
<a href="1.html">2隐藏部分</a>
</div>
</div>
</body>
</html>
问题：鼠标移入“1显示部分”时候，“1隐藏部分”覆盖掉“2显示部分”。我想要的效果：鼠标移入时候，“1隐藏部分”显示出来，“2显示部分”向下移动(不要被“1隐藏部分”覆盖掉。)
