仿保时捷网站菜单 -

jjklmm

浏览: 55177 次
性别:
来自: 北京

最近访客更多访客>>

jk_zero

dagf113225

zhifux868

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

仿保时捷网站菜单

博客分类：

web html css

javascript 下拉菜单

效果查看地址：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" id="miaov_nav">
        <ul class="miaov_navTop" id="miaov_navTop">
        <li>
            <h2 class="index"><a href="http://www.miiceic.org.cn/">企业培训</a></h2>
            <ul class="miaov_navTopSecond">
            <li><a href="http://www.miiceic.org.cn/gongkaike/zuixin/">最新公开课</a></li>
            <li><a href="http://www.miiceic.org.cn/gongkaike/kechyg/">课程预告</a></li>
            <li><a href="http://www.miiceic.org.cn/gongkaike/wangqi/">公开课大全</a></li>
            </ul>
        </li>
        <li>
        <h2><a href="http://www.miiceic.org.cn/kecheng/">高端课程</a></h2>
        <ul class="miaov_navTopSecond">
        <li><a href="http://www.miiceic.org.cn/kecheng/qianrushi/">嵌入式培训</a></li>
        <li><a href="http://www.miiceic.org.cn/kecheng/shujuku/">数据库培训</a></li>
        <li><a href="http://www.miiceic.org.cn/kecheng/qiguan/">项目管理</a></li>
        <li><a href="http://www.ruankaopeixun.com/">软考培训</a></li>
        <li><a href="http://www.miiceic.org.cn/kecheng/minjie/">新技术领域</a></li>
        </ul>
        </li>
        </ul>
    <ul class="miaov_navBottom">
    <li>
    <h2><a href="http://www.miiceic.org.cn/tuandui/">专家团队</a></h2>
    <ul>
    <li><a href="http://www.miiceic.org.cn/tuandui/">中程专家</a></li>
    <li><a href="http://www.miiceic.org.cn/tuandui/">台湾顾问</a></li>
    </ul>
    </li>
    <li>
    <h2><a href="http://www.miiceic.org.cn/dingzhi/">企业内训</a></h2>
    <ul>
    <li><a href="http://www.miiceic.org.cn/vip/5346.html">VIP会员服务</a></li>
    <li><a href="http://www.miiceic.org.cn/vip/5346.html">讲师团队</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div class="miaov_boxShade" id="miaov_boxShade"></div>
    <div class="miaov_boxShadeSecond" id="miaov_boxShadeSecond"></div>
    <ul class="miaov_box" id="miaov_box">
    <li class="show">
    <h3>最新公开课</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>“高级测试架构师”培训、“测试用例分析与设计”培训、“云计算架构鉴赏”培训</p>
    </li>
    <li>
    <h3>课程预告</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>华东区2011年第四季度技术课程预告\华北区2011年第四季度技术课程预告\华南区2011年第四季度技术课程预告</p>
    </li>
    <li>
    <h3>公开课大全</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>公开课大全 http://www.miiceic.org.cn/gongkaike/wangqi/</p>
    </li>
    <li>
    <h3>嵌入式培训</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>嵌入式典型应用-手机开发培训/VxWorks应用开发（嵌入式OS-VxWorks）/基于WinCE内核开发及应用开发（嵌入式OS-Windows CE）</p>
    </li>
    <li>
    <h3>数据库培训</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>对ORACLE,DB2,SQLSERVER等企业数据库有丰富的项目经验,曾为电信,银行,证券等行业实施数据库。对数据库集群技术,数据库优化技术,数据库安全方面有着丰富的项目经验。早期一直致力于软件工程的研究与实战，对国内外软件工程的理论与实践有透彻的理解和研究。曾多次参与如联通、中科院、红河集团等政府或大型企业项目研发。被多家机构纷纷聘请为顾问组成员及企业首席培训师。曾培训的企业包括建设银行、工商银行、中信证券、河北移动、新浪、长春一汽、中信建投、联通、中软、北医医学部等众多知名企业。</p>
    </li>
    <li>
    <h3>项目管理</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>专注于项目实施与执行及项目管理规范的制定与推广，有13年以上的大型项目实施及项目管理经验（包括大型跨国项目管理实施经验），超过20年的IT经验，在IBM、Intel工作期间，为一些著名客户实施过大型项目</p>
    </li>
    <li>
    <h3>软考培训</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>安博中程软考辅导专家。具有丰富系统集成实践经验的资深系统集成项目管理专家，项目管理专业人士(PMP) ，全国计算机技术与软件专业技术资格(水平)考试用书编委会成员</p>
    </li>
    <li>
    <h3>新技术领域</h3>
    <img src="http://www.miiceic.org.cn/images/logo2.gif" alt="安博中程企业培训"/>
    <p>新技术领域</p>
    </li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript">
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>