仿京東左側欄目導航

效果圖：

查看效果：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