仿京东左侧栏目导航
效果图：
查看效果：http://www.miiceic.org.cn/eg/eg10/abzc.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<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">
*{ margin:0; padding:0;}
body{ font:12px/22px "宋体", "Arial Unicode MS"; color:#666; background-color:#f9f9f9;}
em{ font-style:normal;}
H3 {FONT-SIZE: 12px}
.box{width:188px;/** margin:20px auto; **/text-align:left; float:left; margin:4px 10px 0 0;}
.allsort {Z-INDEX:10;/** BACKGROUND: url(/images/Bg.jpg) no-repeat 0px -166px;**/ FLOAT: left; WIDTH: 188px; MARGIN-left: 4px; POSITION: relative; HEIGHT:32px; background-color:#FFFFFF;clear:both;}
.allsort .mt {PADDING-RIGHT: 12px; PADDING-LEFT: 16px; CURSOR: pointer; LINE-HEIGHT: 24px; HEIGHT: 24px; margin:0}
.allsort .mt { font-family:"微软雅黑", "宋体", "黑体";FONT-SIZE: 14px; FLOAT: left; COLOR: #630}
#o-search .allsort .mt A {COLOR: #630}
.allsort .mt .extra {DISPLAY: none}
.allsort .mc { left:-1px; background:#FFF;BORDER-RIGHT: #C6001D 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #C6001D 0px solid; PADDING-LEFT: 3px;PADDING-BOTTOM: 0px; OVERFLOW: visible; BORDER-LEFT: #C6001D 1px solid; WIDTH: 182px; PADDING-TOP: 0px; BORDER-BOTTOM: #C6001D 1px solid; POSITION: absolute; TOP: 32px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px}
.allsort .item {BORDER-TOP: #E8E8E8 1px solid; WIDTH: 176px; HEIGHT:27px}
.allsort .fore {BORDER-TOP-STYLE: none}
.allsort SPAN {DISPLAY: block; Z-INDEX: 1; WIDTH: 176px; POSITION: relative}
.allsort H3 { PADDING-LEFT: 20px; FONT-WEIGHT: normal; /*BACKGROUND: url(/images/bg.jpg) no-repeat -318px -240px;BORDER-LEFT: #fef8ef 1px solid;BORDER-RIGHT: #fef8ef 0px solid; BORDER-TOP: #fef8ef 1px solid; BORDER-BOTTOM: #fef8ef 1px solid;*/ WIDTH: 165px; HEIGHT:28px;}
.allsort H3 A:link { DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT:27px}
.allsort H3 A:visited {DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT: 27px}
.allsort H3 A:hover {COLOR: #ff0000}
.allsort H3 A:active {COLOR: #666}
.allsort S {DISPLAY: block; BACKGROUND: url(/images/homeBg_53.gif) no-repeat top right; LEFT: 156px; WIDTH: 13px; POSITION: absolute; TOP: 10px; HEIGHT: 13px}
.allsort .item .i-mc { DISPLAY: none; LEFT: 188px; OVERFLOW: hidden; WIDTH: 563px;/** BACKGROUND: #fff9ef;BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid;BORDER-RIGHT: #c30 1px solid; BORDER-TOP: #c30 1px solid;**/ border:1px solid #FF0000; background-color:#FFFFFF; POSITION: absolute; TOP: 0px}
.allsort .item DT { PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; PADDING-TOP: 3px}
.allsort .item DD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 3px; ZOOM: 1}
.allsort .subitem { PADDING-RIGHT: 4px; PADDING-LEFT: 8px; MIN-HEIGHT: 300px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 484px; PADDING-TOP: 0px}
.allsort .subitem .fore{ display:block; width:550px; clear:both; overflow:hidden; border-bottom:1px solid #eee;}
.allsort .subitem dt{ width:80px; text-align:center; float:left;}
.allsort .subitem dd{ float:left; display:block; color:#999999;}
.allsort .subitem dd span{ display: inline-table; color:#333333; width:90px; float:left;}
.allsort .subitem dd a{ color:#3399FF;}
/**.allsort .subitem DL { PADDING-RIGHT: 0px; BORDER-TOP: #ffefd7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 6px; OVERFLOW: hidden; PADDING-TOP: 6px; ZOOM: 1}
.allsort .subitem .fore { BORDER-TOP-STYLE: none}
.allsort .subitem DT { FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 22px; TEXT-ALIGN: right}
.allsort .subitem DT A{COLOR: #c00;}
.allsort .subitem DD { FLOAT: left; }
.allsort .subitem DD A { BORDER-LEFT: #ccc 1px solid; padding:0 8px; margin-bottom:5PX; TEXT-DECORATION: underline;display:inline-block; line-height:20PX;}**/
.allsort .fr {BACKGROUND: #fff; MARGIN-BOTTOM: -2000px; PADDING-BOTTOM: 2010px; WIDTH: 176px}
.allsort .fr DL {PADDING-BOTTOM: 0px}
#o-search .allsort .fr A {COLOR: #666}
.allsort .brands {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .brands EM {FLOAT: left; WIDTH: 80px}
.allsort .brands DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .promotion {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .promotion DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .mc .extra {PADDING-RIGHT: 8px; BORDER-TOP: #fde6d2 1px solid; PADDING-LEFT: 8px; BACKGROUND: #fdf1de; PADDING-BOTTOM: 7px; PADDING-TOP: 7px}
#o-search .allsort .mc .extra A {COLOR: #c00}
.allsorthover {BACKGROUND-POSITION: 0px -166px}
.allsorthover .mt .extra {BACKGROUND-POSITION: -274px -190px}
.allsorthover .mc {DISPLAY: block}
.allsort .hover SPAN {Z-INDEX: 13; WIDTH: 160px}
.allsort .hover H3 {BORDER-RIGHT: #c30 0px solid; BORDER-TOP: #c30 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(/images/Bg.jpg) #fff no-repeat -318px -172px; OVERFLOW: hidden; BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid}
.allsort .hover S {DISPLAY: none}
.allsort .hover .i-mc {DISPLAY: block; Z-INDEX: 12}
* HTML .allsort .item DD {PADDING-BOTTOM: 6px}
.allsort .blue{ border-top:solid 1px #ddd;}
.allsort .blue a{color:#3399FF;font-weight:bold;text-decoration: underline; padding-left:20px;}
</style>
<body>
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery.min.js"></script>
<script type="text/javascript">
(function ($){$.fn.hoverForIE6 = function (option) { var s = $.extend({ current: "hover", delay: 10 }, option || {});$.each(this, function () { var timer1 = null, timer2 = null, flag = false;$(this).bind("mouseover", function () { if (flag) { clearTimeout(timer2); } else { var _this = $(this); timer1 = setTimeout(function () { _this.addClass(s.current); flag = true; }, s.delay); } }).bind("mouseout", function () { if (flag) { var _this = $(this); timer2 = setTimeout(function () { _this.removeClass(s.current); flag = false; }, s.delay); } else { clearTimeout(timer1); } }) }) } })(jQuery);
</script>
<div class="allsort">
<div class="mt"><a href="http://www.miiceic.org.cn/">安博中程栏目分类</a></div>
<div class="mc">
<div class="item fore">
<span>
<h3>最新公开课</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>北京</dt>
<dd>
<p>
2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
</p>
</dd>
</dl>
<dl class="fore">
<dt>上海</dt>
<dd>
<p>
2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
</p>
</dd>
</dl>
<dl class="fore">
<dt>深圳</dt>
<dd>
<p>
2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>高端课程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>软件工程培训</dt>
<dd>
<p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
</dd>
</dl>
<dl class="fore">
<dt>嵌入式培训</dt>
<dd>
<p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
</dd>
</dl>
<dl class="fore">
<dt>数据库培训</dt>
<dd>
<p>SQL Server系列 | ORACLE系列 | DB2系列</p>
</dd>
</dl>
<dl class="fore">
<dt>专项突破 </dt>
<dd>
<p>
<span>数学</span>思维训练 |奥数 | 华数 | 数学集训
</p>
<p>
<span>语文</span>阅读 | 作文
</p>
<p>
<span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>安博中程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>安博中程</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>企业内训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>软考培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>android培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>UI设计</dt>
<dd>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>
<b>专家团队</b>
</h3>
<s></s>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>台湾顾问</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
</p>
</dd>
</dl>
<dl class="fore">
<dt>中程专家</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<span>
<h3>最新公开课</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>北京</dt>
<dd>
<p>
2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
</p>
</dd>
</dl>
<dl class="fore">
<dt>上海</dt>
<dd>
<p>
2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
</p>
</dd>
</dl>
<dl class="fore">
<dt>深圳</dt>
<dd>
<p>
2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>高端课程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>软件工程培训</dt>
<dd>
<p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
</dd>
</dl>
<dl class="fore">
<dt>嵌入式培训</dt>
<dd>
<p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
</dd>
</dl>
<dl class="fore">
<dt>数据库培训</dt>
<dd>
<p>SQL Server系列 | ORACLE系列 | DB2系列</p>
</dd>
</dl>
<dl class="fore">
<dt>专项突破 </dt>
<dd>
<p>
<span>数学</span>思维训练 |奥数 | 华数 | 数学集训
</p>
<p>
<span>语文</span>阅读 | 作文
</p>
<p>
<span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>企业培训</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>安博中程</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>企业内训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>软考培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>android培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>UI设计</dt>
<dd>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>
<b>专家团队</b>
</h3>
<s></s>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>台湾顾问</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
</p>
</dd>
</dl>
<dl class="fore">
<dt>中程专家</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
</p>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".allsort .item").hoverForIE6({ delay: 150 });
</script>
<div style="float:left;width:600px;font-size:14px;line-height:36px;padding-top:50px;padding-left:20px;">
安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端 技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培 训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌.
</div>
</body>
</html>
查看效果：http://www.miiceic.org.cn/eg/eg10/abzc.html
