主要技术点在延迟关闭DIV
效果图：
源码下载：点击下载
简洁版代码：
<!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 type="text/javascript" language="javascript">
function $(id)
{
return document.getElementById(id);
}
function showMenu (baseID, divID)
{
baseID = $(baseID);
divID = $(divID);
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (!divID.isCreate)
{
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function ()
{
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide ()
{
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur ()
{
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
</script>
</head>
<body>
<a id="aIndex1" runat="server" href="/cn/ABC.aspx" onmouseover="showMenu('aIndex1','divFloatDIV');">频道名1</a>
<div id="divFloatDIV" style="200px; height:200px; background-color:#999999; display:none;">aaaaaaaaaaaaaaaaaa</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function $(id)
{
return document.getElementById(id);
}
function showMenu (baseID, divID)
{
baseID = $(baseID);
divID = $(divID);
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (!divID.isCreate)
{
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function ()
{
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide ()
{
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur ()
{
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
</script>
</head>
<body>
<a id="aIndex1" runat="server" href="/cn/ABC.aspx" onmouseover="showMenu('aIndex1','divFloatDIV');">频道名1</a>
<div id="divFloatDIV" style="200px; height:200px; background-color:#999999; display:none;">aaaaaaaaaaaaaaaaaa</div>
</body>
</html>