仿联想上拉菜单

2012-11-23

仿联想下拉菜单效果查看网址：http://www.miiceic.org.cn效果图：?!DOCTYPE html PUBLIC -//W3C//DTD XHTM

仿联想下拉菜单

效果查看网址：http://www.miiceic.org.cn

效果图：
仿联想上拉菜单
?

<!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=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 type="text/css"> 
#menu { 
??? list-style:none; 
??? width:930px; 
??? margin:0px auto; 
??? height:43px; 
??? padding:0px 10px 0px 10px; 
??? /* Rounded Corners */ 
??? -moz-border-radius: 10px; 
??? -webkit-border-radius: 10px; 
??? border-radius: 10px; 
??? /* Background color and gradients */ 
??? background: #990000; 
??? background: -moz-linear-gradient(top, #b60202, #990000); 
??? background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b60202), to(#990000)); 
??? /* Borders */ 
??? border: 1px solid #cc0000; 
??? -moz-box-shadow:inset 0px 0px 1px #edf9ff; 
??? -webkit-box-shadow:inset 0px 0px 1px #edf9ff; 
??? box-shadow:inset 0px 0px 1px #edf9ff; 
} 
#menu li { 
??? float:left; 
??? display:block; 
??? text-align:center; 
??? position:relative; 
??? padding: 4px; 
??? margin-right:10px; 
??? margin-top:7px; 
??? border:none; 
} 
#menu li:hover { 
??? padding: 4px; 
??? /* Background color and gradients */ 
??? background: #F4F4F4; 
??? background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
??? background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 
??? /* Rounded corners */ 
??? -moz-border-radius: 5px 5px 0px 0px; 
??? -webkit-border-radius: 5px 5px 0px 0px; 
??? border-radius: 5px 5px 0px 0px; 
} 
#menu li a { 
??? font-family:Arial, Helvetica, sans-serif; 
??? font-size:14px; 
??? font-weight:bold; 
??? color: #fff; 
??? text-decoration:none; 
??? text-shadow: 1px 1px 1px #000; 
} 
#menu li:hover a { 
??? color:#161616; 
??? text-shadow: 1px 1px 1px #ffffff; 
} 
#menu li .drop { 
??? padding-right:21px; 
??? background:url("/templets/images/drop.gif") no-repeat right 8px; 
} 
#menu li:hover .drop { 
??? background:url("/templets/images/drop.png") no-repeat right 7px; 
} 
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns {margin:4px auto; 
??? *margin:20px auto; 
??? _margin:20px auto; 
??? float:left; 
??? position:absolute; 
??? left:-999em; /* Hides the drop down */ 
??? text-align:left; 
??? padding:10px 5px 10px 5px; 
??? border:1px solid #777777; 
??? border-top:none; 
??? 
??? /* Gradient background */ 
??? background:#F4F4F4; 
??? background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
??? background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 
??? /* Rounded Corners */ 
??? -moz-border-radius: 0px 5px 5px 5px; 
??? -webkit-border-radius: 0px 5px 5px 5px; 
??? border-radius: 0px 5px 5px 5px; 
} 
.dropdown_1column {width: 140px;} 
.dropdown_2columns {width: 280px;} 
.dropdown_3columns {width: 420px;} 
.dropdown_4columns {width: 560px;} 
.dropdown_5columns {width: 700px;} 
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
??? left:-1px; 
??? top:auto; 
} 
.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
??? float: left; 
??? position: relative; 
??? margin-left: 5px; 
??? margin-right: 5px; 
} 
.col_1 {width:130px;} 
.col_2 {width:270px;} 
.col_3 {width:410px;} 
.col_4 {width:550px;} 
.col_5 {width:690px;} 
#menu .menu_right { 
??? float:right; 
??? margin-right:0px; 
} 
#menu li .align_right { 
??? /* Rounded Corners */ 
??? -moz-border-radius: 5px 0px 5px 5px; 
??? -webkit-border-radius: 5px 0px 5px 5px; 
??? border-radius: 5px 0px 5px 5px; 
} 
#menu li:hover .align_right { 
??? left:auto; 
??? right:-1px; 
??? top:auto; 
} 
#menu p, #menu h2, #menu h3, #menu ul li { 
??? font-family:Arial, Helvetica, sans-serif; 
??? line-height:21px; 
??? font-size:12px; 
??? text-align:left; 
??? text-shadow: 1px 1px 1px #FFFFFF; 
} 
#menu h2 { 
??? font-size:21px; 
??? font-weight:400; 
??? letter-spacing:-1px; 
??? margin:7px 0 14px 0; 
??? padding-bottom:14px; 
??? border-bottom:1px solid #666666; 
} 
#menu h2 a{ 
??? font-size:14px;??? 
} 
#menu h3 { 
??? font-size:14px; 
??? margin:7px 0 14px 0; 
??? padding-bottom:7px; 
??? border-bottom:1px solid #888888; 
} 
#menu p { 
??? line-height:18px; 
??? margin:0 0 10px 0; 
} 
.col_4 p{line-height:24px;margin:0 0 10px 0;min-height:50px;_height:50px;} 
#menu li:hover div a { 
??? font-size:12px; 
??? color:#666; 
??? font-weight:normal; 
} 
#menu li:hover div a:hover { 
??? color:#029feb; 
??? font-weight:normal; 
} 
.strong { 
??? font-weight:bold; 
} 
.italic { 
??? font-style:italic; 
} 
.imgshadow { /* Better style on light background */ 
??? background:#FFFFFF; 
??? padding:4px; 
??? border:1px solid #777777; 
??? margin-top:5px; 
??? -moz-box-shadow:0px 0px 5px #666666; 
??? -webkit-box-shadow:0px 0px 5px #666666; 
??? box-shadow:0px 0px 5px #666666; 
} 
.img_left { /* Image sticks to the left */ 
??? width:auto; 
??? float:left; 
??? margin:5px 15px 5px 5px; 
} 
#menu li .black_box { 
??? background-color:#333333; 
??? color: #eeeeee; 
??? text-shadow: 1px 1px 1px #000; 
??? padding:4px 6px 4px 6px; 
??? text-align:center; 
??? /* Rounded Corners */ 
??? -moz-border-radius: 5px; 
??? -webkit-border-radius: 5px; 
??? border-radius: 5px; 
??? /* Shadow */ 
??? -webkit-box-shadow:inset 0 0 3px #000000; 
??? -moz-box-shadow:inset 0 0 3px #000000; 
??? box-shadow:inset 0 0 3px #000000; 
} 
#menu li ul { 
??? list-style:none; 
??? padding:0; 
??? margin:0 0 12px 0; 
} 
#menu li .greybox li { 
??? background:#F4F4F4; 
??? border:1px solid #bbbbbb; 
??? margin:0px 0px 4px 0px; 
??? padding:4px 6px 4px 6px; 
??? width:116px; 
??? /* Rounded Corners */ 
??? -moz-border-radius: 5px; 
??? -webkit-border-radius: 5px; 
??? -khtml-border-radius: 5px; 
??? border-radius: 5px; 
} 
#menu li .greybox li:hover { 
??? background:#ffffff; 
??? border:1px solid #aaaaaa; 
??? padding:4px 6px 4px 6px; 
??? margin:0px 0px 4px 0px; 
} 
.menu0{width:690px; font-family:"宋体";height:36px; font-size:14px; font-weight:bold; margin:0;padding:0;color:#FFF;border-bottom:1px solid #666666;} 
.menu0? li{display:block; float: left; width:80px; height:21px; line-height:21px; cursor:pointer; background: #fff; border:1px solid #e50014; color:#000;} 
.menu0? li.hover{background: #e50014; color:#FFF;} 
#menu0 {width:690px; float:left;} 
#menu0 li{margin-right:5px;} 
#main0 ul{display: none; text-align:left; margin:0; padding:0;font-size:12px; line-height:22px; color:#666;} 
#main0 ul.block{display: block; margin:0; padding:0;} 
</style> 
 
<body> 
<ul id="menu"> 
??? <li><a href="http://www.miiceic.org.cn">首页</a></li> 
??? <li><a href="http://www.miiceic.org.cn/kecheng/" id="menu0"> 
??????????????????? <li onmouseover="setTab(0,0)" target="_blank">软件工程培训</a></li> 
??????????????????? <li onmouseover="setTab(0,1)"><a href="http://www.miiceic.org.cn/kecheng/qianrushi/" target="_blank">嵌入式培训</a></li> 
??????????????????? <li onmouseover="setTab(0,2)"><a href="http://www.miiceic.org.cn/kecheng/minjie/" target="_blank">新技术领域</a></li> 
??????????????????? <li onmouseover="setTab(0,3)"><a href="http://www.miiceic.org.cn/kecheng/shujuku/" target="_blank">数据库培训</a></li> 
??????????????????? <li onmouseover="setTab(0,4)"><a href="http://www.miiceic.org.cn/kecheng/jungong/" target="_blank">国防军工培训</a></li> 
??????????????????? <li onmouseover="setTab(0,5)"><a href="http://www.miiceic.org.cn/kecheng/qiguan/" target="_blank">项目管理</a></li> 
??????????????????? <li onmouseover="setTab(0,6)" style="width:110px;"><a href="http://www.miiceic.org.cn/kecheng/e-learning/" target="_blank">在线学习解决方案</a></li> 
???????????????? </ul> 
???????????? <div id="main0"> 
??????????? <ul style="display:block;"> 
??????????? 
??????????? <div style="color:#FFFFFF;">软件架构专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">软件设计专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">软件开发专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">软件测试专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">软件过程专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">业务规划专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">软件需求分析</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">嵌入式架构设计</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">嵌入式系统开发</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">嵌入式软件开发</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">嵌入式网络</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">Android方向</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">敏捷开发方向</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">数据库通用课程</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">SQL Server系列</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">ORACLE系列</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">DB2系列</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">电子产品设计专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">军工管理专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">信息化专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">技术工艺专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">基础管理专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">项目管理专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">专业管理专题</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">商业技能类</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">IT技能类</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">办公软件类</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">环保、安全与健康类</a> 
??????????? </div> 
??????????? <div style="color:#FFFFFF;">垂直解决方案类</a> 
??????????? </div> 
??????????? <div width="70" height="70" alt="仿联想上拉菜单" /> 
??????????????? 安博中程Android专家顾问。台湾Android论坛负责人，曾被誉为台湾Android技术教父;著名的海峡两岸Android技术推广领军人物;现任亚太地区Android技术大会负责人;台湾Android领域框架开发联盟总架构师。从事IT领域30年，专精于Android核心框架及核心服务程式开发...<a href="/tuandui/guwen_1029.html">详细...</a> 
??? 
??????????????? <img src="http://www.miiceic.org.cn/uploads/100325/1-100325152433A8.jpg" width="70" height="70" alt="仿联想上拉菜单" /> 
??????????????? 柯博文先生目前在LoopTek担任美国硅谷公司技术总监一职，专注于Apple iPhone和Google Android手机应用软件开发。自1993年起连续两年拿下电玩设计比赛金磁盘奖，更在1998年以电玩大富翁总动员... <a href="/tuandui/guwen_1028.html">详细...</a> 
??????????? </div> 
?????????? <div class="drop">合作机构</a> 
??????? <div class="dropdown_1column align_right"> 
??????????? <div class="col_1"> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/92.html'>政府机构</a> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/101.html'>国防军工</a>? 
??????????????? <a href='http://www.miiceic.org.cn/jigou/100.html'>能源与石油</a> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/97.html'>信息通讯</a> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/95.html'>IT与互联网</a> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/93.html'>金融保险</a> 
??????????????? <a href='http://www.miiceic.org.cn/jigou/102.html'>其他行业</a>??????????? 
??????????? </div> 
??????? </div> 
</li> 
</ul> 
</body> 
</html> 
<script> 
function setTab(m,n){ 
?var tli=document.getElementById("menu"+m).getElementsByTagName("li"); 
?var mli=document.getElementById("main"+m).getElementsByTagName("ul"); 
?for(i=0;i<tli.length;i++){ 
? tli[i].className=i==n?"hover":""; 
? mli[i].style.display=i==n?"block":"none"; 
?} 
} 
</script>

效果查看网址：效果查看网址：http://www.miiceic.org.cn

热点排行

Web前端

仿联想上拉菜单