仿Chinaz首页菜单导航

主要技术点在延迟关闭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>