学步园

HTML

<div class ="nav">
        <div class="navinner">
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/"  id="nav_1" onMouseOver="showMenu('nav_1','subnav1')">资讯</a></li>
                <div class ="subnav" id="subnav1"><p><span>行业发展|行业动态</span></p></div>
                <li><a href="/" id="nav_2" onMouseOver="showMenu('nav_2','subnav2')">招商</a></li>
                <div class ="subnav" id="subnav2"><p><span>招商信息|供应信息|求购信息|网上展厅</span></p></div>
            </ul>
        </div>
    </div>

JAVASCRIPT

function $(id)
{
    return document.getElementById(id);
}
function showMenu (baseID, divID)
{
    baseID = $(baseID);
    divID  = $(divID);
   
    if (showMenu.timer)
    {
        clearTimeout(showMenu.timer);
        showMenu.cur.style.display = 'none';
    }
   
    divID.style.display = 'block';
   
    divID.onmouseover = function ()
    {
        if (showMenu.timer) clearTimeout(showMenu.timer);
        divID.style.display = 'block';
    }
    
    showMenu.cur = divID;
   
    function hide ()
     {
         showMenu.timer = setTimeout(function (){divID.style.display = 'none';}, 1000);
     }

     baseID.onmouseout = hide;
     divID.onmouseout = hide;
}

CSS

body
{
 font-size :12px;
}
.nav
{
    left :50px;
 }
.navinner ul
{
    list-style :none;
    margin-left :50px;
 }
.navinner ul li
{
   display :inline;
 }
.subnav
{
 display :none;
 position: absolute;
 left :50px;
 top: 30px;
 float: left;
 height: 27px;
 line-height: 27px;
 border :solid 1px blue;
 width:300px;
 background-color :#E0E0E0;
}