如何制作簡單的網頁動態下拉導航菜單，下面給大家實際演示下：
HTML部分
<html>
<head>
<title>標題</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="xiala.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="#">網站首頁</a></li>
<li><a href="#" onMouseOver="mopen('a')" onMouseOut="mclosetime()">關于我們</a>
<div id="a" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#" target="_blank">公司簡介</a>
<a href="#">公司文化</a>
</div>
</li>
<li><a href="#" onMouseOver="mopen('b')" onMouseOut="mclosetime()">產品中心</a>
<div id="b" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#" target="_blank">產品分類一</a>
<a href="#">產品分類二</a>
<a href="#">產品分類三</a>
</div>
</li>
<li><a href="#">聯系我們</a></li>
</ul>
</body>
</html>
CSS部分
#nav{margin: 0 auto;line-height:50px ;font-size: 18px;}
#nav li{list-style: none;float: left;width: 160px;}
#nav li a{display: block;background: #5970B2;color: #fff;text-align: center;text-decoration: none}
#nav li a:hover{background: #49a3ff}
#nav div{position: absolute;visibility: hidden;font-size: 14px;}
#nav div a{display: block;width: 160px;line-height:40px;text-align: center;text-decoration: none;background: #eee;color: #000;}
#nav div a:hover
{background: #49a3ff;color: #FFF}
JS部分
var timeout = 100; /* 控制下拉消失時間，單位毫秒 */
var closetimer= 0;
var ddmenuitem = 0;
function mopen(id)
{ mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
function mclosetime()
{ closetimer = window.setTimeout(mclose, timeout); }
function mcancelclosetime()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}
}
document.onclick = mclose;
效果展示
以上代碼HTML部分根據自己需要調用需要的二級菜單數量，CSS部分調整導航條背景，字體等，JS調整下拉窗口消失時間。
網頁定做咨詢 
