实用下拉菜单
效果查看地址：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" 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 align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span 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 align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span 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 align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span 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 align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span 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>
?
效果查看地址：http://www.miiceic.org.cn/eg/eg8/caidan.html
