效果查看地址：http://www.miiceic.org.cn/eg/eg6/bsj.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库, 国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训, 敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品 牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
<meta name="subject" content="软件开发企业培训,企业内训,软考培训,android应用开发培训,软件工程培训,嵌入式培训,UI设计培训"/>
<meta name="author" content="安博教育集团安博中程"/>
<style>
body,ul,h2,h3,p{margin:0;padding:0;}
html{height:100%;}
li{list-style:none;}
a{text-decoration:none;}
body{height:100%;}
.miaov_page{width:960px;margin:0 auto;position:relative;}
.miaov_shade{width:260px;background-color:#000;opacity:0.2;filter:alpha(opacity=20);position:absolute;top:40px;height:240px;}
.miaov_nav{width:240px;position:absolute;top:50px;left:10px;padding-top:10px;}
.miaov_shadeSecond{width:240px;background-color:#CA6F86;position:absolute;top:50px;left:10px;height:220px;opacity:0.4;filter:alpha(opacity=40);}
.miaov_navTop,.miaov_navBottom,.miaov_nav li{width:220px;margin:0 auto;}
.miaov_nav li{float:left;}
.miaov_nav h2 {height:48px;background:#C91743 url(http://www.miiceic.org.cn/images/ico.gif) 200px 22px no-repeat;border-bottom:2px solid #F0907A;line-height:50px;text-indent:10px;overflow:hidden;}
.miaov_nav h2 a{font-size:14px;color:#F4BEB5;}
.miaov_nav .show h2{background:#E73156;border-left:2px solid #F0907A;position:relative;z-index:10;width:207px;}
.miaov_nav .show h2 a{color:#F3947C;}
.miaov_nav li ul{display:none;}
.miaov_nav .show{position:relative;}
.miaov_nav .show ul{display:block;position:absolute;left:207px;top:-2px;border:2px solid #F0907A;z-index:5;width:240px;background:#E73156;padding:8px 0;}
.miaov_nav .show ul li{height:40px;line-height:30px;line-height:40px;text-indent:5px;background:url(http://www.miiceic.org.cn/images/ico.gif) 200px -33px no-repeat;border-bottom:2px solid #F0907A;}
.miaov_nav .show ul li {float:none;}
.miaov_nav .show ul li a{color:#F3947C;}
.miaov_nav .show ul .active{background:url(http://www.miiceic.org.cn/images/ico.gif) 200px 17px no-repeat #EB5674;}
.miaov_nav .show ul .active a{color:#F4BEB5;font-weight:bold;}
.miaov_navTop{border-top:2px solid #F0907A;}
.miaov_nav .miaov_navBottom .show ul li{background:none;}
.miaov_nav .miaov_navBottom .show ul .active{background:#EB5674;}
.miaov_boxShade{width:320px;background-color:#000;opacity:0.2;filter:alpha(opacity=20);position:absolute;top:40px;height:340px;right:50px;display:none;}
.miaov_boxShadeSecond{width:310px;background-color:#CA6F86;position:absolute;top:45px;height:330px;opacity:0.4;filter:alpha(opacity=40);right:55px;display:none;}
.miaov_box{width:300px;position:absolute;top:45px;right:60px;display:none;}
.miaov_box li{display:none;}
.miaov_box .show{display:block;}
.miaov_box .show h3{line-height:40px;font-size:14px;color:#F3947C;}
.miaov_box .show img{float:left;}
.miaov_box .show p{text-indent:2em;font-size:12px;line-height:20px;padding-top:5px;color:#F4BEB5;clear:both;}
</style>
</head>
<body>
<div class="miaov_page">
<div class="miaov_shade"></div>
<div class="miaov_shadeSecond"></div>
<div class="miaov_nav" >
var count=0;
window.onload=function ()
{
var oUl=document.getElementById('miaov_box');
var oUlShade=document.getElementById('miaov_boxShade');
var oUlShadeSecond=document.getElementById('miaov_boxShadeSecond');
var aLiBox=oUl.getElementsByTagName('li');
var aLi=document.getElementsByTagName('li');
var timer=null;
var i=0,j=0;
oUl.onmouseover=function (){
clearTimeout(timer);
};
oUl.onmouseout=function (){
for(i=0;i<aLi.length;i++)
{
switch(aLi[i].parentNode.className)
{
case 'miaov_navTopSecond':
case '':
aLi[i].className='';
break;
}
};
clearTimeout(timer);
timer=setTimeout(function (){
oUlShade.style.display=oUlShadeSecond.style.display=oUl.style.display='none';
for(i=0;i<aLiBox.length;i++)aLiBox[i].className='';
for(i=0;i<aLi.length;i++){
switch(aLi[i].parentNode.className){
case 'miaov_navTopSecond':
oUlShade.style.display=oUlShadeSecond.style.display=oUl.style.display='none';
aLiBox[aLi[i].index].className='';
case '':
aLi[i].className='';
break;
case 'miaov_navBottom':
case 'miaov_navTop':
aLi[i].className='';
break;
}
}
}, 500);
};
for(i=0;i<aLi.length;i++){
aLi[i].onmouseover=function (){
clearTimeout(timer);
switch(this.parentNode.className){
case 'miaov_navTopSecond':
oUlShade.style.display=oUlShadeSecond.style.display=oUl.style.display='block';
for(i=0;i<aLiBox.length;i++)aLiBox[i].className='';
aLiBox[this.index].className='show';
case '':
this.className='active';
break;
case 'miaov_navBottom':
case 'miaov_navTop':
for(i=0;i<aLi.length;i++)
if(aLi[i].parentNode.className=='miaov_navBottom' || aLi[i].parentNode.className=='miaov_navTop')aLi[i].className='';
this.className='show';
break;
}
};
aLi[i].onmouseout=oUl.onmouseout;
if(aLi[i].parentNode.className=='miaov_navTopSecond'){
aLi[i].index=j++;
}
}
};
</script>
效果查看地址：http://www.miiceic.org.cn/eg/eg6/bsj.html