实用下拉菜单
效果查看地址：http://www.miiceic.org.cn/eg/eg8/caidan.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库, 国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训, 敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品 牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
</head>
<style type="text/css">
body{background:url(bodybg.gif) repeat-x #c5e3ff;margin:0;padding:0;}
#menu{width:950px; height:32px; margin:0 auto; margin-top:9px;}
#menu ul{list-style:none; margin:0; padding:0;}
#menu li { height:32px; width:80px; float:left; margin:0 5px; font-size:14px; line-height:32px; font-weight:bold; text-align:center; color:#FFF;}
#menu li a{ height:32px; width:80px; float:left; margin:0 5px; font-size:14px; line-height:32px; font-weight:bold; text-align:center; color:#1d6ab8; text-decoration:none;background:url(menu.gif);}
#menu li a:hover{text-decoration:underline; background:url(menu.gif); color:#1d6ab8;}
#menu li a img{vertical-align:middle;}
.menut{position: absolute;display:none;}
.menut a:link{color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:visited {color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:hover {color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:active {color:#fdfeff;font-size:12px;font-weight:bold;}
.STYLEw {color: #4D7CB0;font-weight: bold;}
</style>
<body>
<div id="menu">
<ul><li><a href="http://www.miiceic.org.cn/">首页</a></li>
<li><a href="http://www.miiceic.org.cn/kecheng/" id="dha" onMouseOver="m_over(this,2)" onMouseOut="m_out(this)">高端课程<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/">企业培训</a></li>
<li><a href="http://www.miiceic.org.cn/gongkaike/" id="dha" onMouseOver="m_over(this,4)" onMouseOut="m_out(this)">公开课<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/dingzhi/">企业内训</a></li>
<li><a href="http://www.miiceic.org.cn/tuandui/" id="dha" onMouseOver="m_over(this,1)" onMouseOut="m_out(this)">专家团队<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/anli/" id="dha" onMouseOver="m_over(this,3)" onMouseOut="m_out(this)">经典案例<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/vip/5346.html">VIP会员服务</a></li>
<li><a href="http://www.miiceic.org.cn/jigou/92.html">合作机构</a></li>
</ul>
</div>
<div id="menu21" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
<td align="center" valign="top" bgcolor="#54a4de">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">台湾顾问</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">中程专家</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="menu22" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
<td align="center" valign="top" bgcolor="#54a4de">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">嵌入式培训</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">3G Android培训</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">动漫培训</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="menu23" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
<td align="center" valign="top" bgcolor="#54a4de">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">公开课案例</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">企业内训案例</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="menu24" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
<td align="center" valign="top" bgcolor="#54a4de">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">最新公开课</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">课程预告</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">公开课大全</a></span></td>
</tr>
<tr>
<td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">课程表</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<script language="javascript">
var tm;
var menu_now;
function m_over(id,p){
if(tm){
clearTimeout(tm);
display(false);
}
if(p){
menu_now="menu2"+p;
menu_now=document.getElementById(menu_now);
var cc;
switch (p){
case 2: cc=-10;
break;
default:cc=0;
}
menu_now.style.top=gettop(id)+28+"px";
if (menu_now=="menu22"){
menu_now.style.left="10px";
}
else{
menu_now.style.left=getleft(id)+cc+"px";
}
display(true);
}
}
function m_out(id){
id.style.backgroundImage="";
tm=setTimeout("display(false)",500);
}
function gettop(id){
var tt=id.offsetTop;
while(id = id.offsetParent){
tt+=id.offsetTop;
}
return tt;
}
function getleft(id){
var ll=id.offsetLeft;
while(id = id.offsetParent){
ll+=id.offsetLeft;
}
return ll;
}
function display(zhi){
if(menu_now){
menu_now.style.display=zhi?"block":"none";
}
}
function sm_over(id){
if (tm){
clearTimeout(tm);
}
display(true);
}
function sm_out(){
if (tm){
clearTimeout(tm);
}
display(false);
}
</script>
