查看效果：http://www.miiceic.org.cn/eg/eg1/caidan.html
全部源码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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">
a{
font-size: 12px;
}
a:link{
color: #333333;
text-decoration: none;
}
a:visited{
text-decoration: none;
color: #333333;
}
a:hover{
text-decoration: underline;
color: #4E667B;
}
a:active{
text-decoration: none;
}
#Mainmenu{
width:100%;
margin:0px auto;
text-align:center;
height:41px;
background-image: url(nav_bj.jpg);
background-repeat: repeat-x;
}
#MainmenuIn {
width:880px;
margin: 0px auto;
text-align:center;
}
#Mainmenu a{
text-decoration:none;
}
#Mainmenu dl{
position:relative;
padding:0;
margin:0;
width:80px;
float:left;
}
#Mainmenu dl dt{
background:url(xiao.jpg) left 13px no-repeat;
height:41px;
overflow:hidden;
text-align:center;
}
#Mainmenu dl dt.over{
background:none;}
#Mainmenu dl dt a{
display:block;
padding-top:5px;
line-height:33px;
color:#FFF;
font-size:14px;
font-weight:bold;
}
#Mainmenu dl.choose dt,#Mainmenu dl.over dt{
/*background:url(subon.gif) center bottom no-repeat;
border:#2886B3 solid 1px;
border-bottom:0;*/
background:url(menuon.gif) center 3px no-repeat;
}
#Mainmenu dl.choose dt a,#Mainmenu dl.over dt a{
color:#333;
}
#Mainmenu dl dd{
position:absolute;
left:-40px;
top:38px;
display:none;
z-index:2;
}
#Mainmenu dl.choose dd{
display:block;
width:80px;
background:url(menuon.gif) center bottom no-repeat;
padding:5px 0 3px 0;
}
#Mainmenu dl.choose dd div a{
display:block;
margin:0 3px 0 3px;
line-height:25px;
height:25px;
text-align:center;
}
#Mainmenu dl.choose dd div a:hover{
background:#25B0D4;
color:#FFF;
}
#Mainmenu div.post{
float:right;
background:url(menu_post.gif) left top no-repeat;
}
#Mainmenu div.post span{
display:block;
padding:3px 20px 0 30px;
line-height:35px;
background:url(menu_note.gif) 18px 10px no-repeat;
}
#Mainmenu div.post a{
font-size:14px;
font-weight:bold;
color:#FFF;
}
/**/
</style>
<body>
<div id="Mainmenu">
<div id="MainmenuIn">
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" class=over>
<dt class=over><a href="http://www.miiceic.org.cn/">企业培训</a></dt>
<dd>
<div><a href="http://www.miiceic.org.cn/kecheng/">高端课程</a></div>
<div><a href="http://www.miiceic.org.cn/gongkaike/">公开课</a></div>
<div><a href="http://www.miiceic.org.cn/gongkaike/kechyg/">课程预告</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt ><a href="http://www.amboedu.com/">职业教育</a></dt>
<dd>
<div><a href="http://www.amboedu.com/sxjy/xsyg_5928.html">嵌入式开发</a></div>
<div><a href="http://www.amboedu.com/sxjy/xsyg_5929.html">android</a></div>
<div><a href="http://www.amboedu.com/sxjy/xsyg_5923.html">建筑表现</a></div>
<div><a href="http://www.amboedu.com/sxjy/xsyg_5922.html">游戏美工</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.miiceic.org.cn/tuandui/">专家团队</a></dt>
<dd>
<div><a href="http://www.miiceic.org.cn/tuandui/guwen/">台湾顾问</a></div>
<div><a href="http://www.miiceic.org.cn/tuandui/zhuanjia/">中程专家</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.miiceic.org.cn/dingzhi/">企业内训</a></dt>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.amboedu.com/">实训基地</a></dt>
<dd>
<div><a href="http://www.amboedu.com/shiyx/">实验箱</a></div>
<div><a href="http://www.amboedu.com/tuandui/">实训师资</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.miiceic.org.cn/jishuzt/">技术专题</a></dt>
<dd>
<div><a href="http://www.miiceic.org.cn/database/">数据库</a></div>
<div><a href="http://embed.miiceic.org.cn/">嵌入式</a></div>
<div><a href="http://www.miiceic.org.cn/android/">android培训</a></div>
<div><a href="http://www.miiceic.org.cn/ruangong/">软件工程</a></div>
<div><a href="http://www.miiceic.org.cn/renzheng/">认证考试</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.amboedu.com/sxjy/jybz/4227.html">就业保障</a></dt>
<dd>
<div><a href="http://www.amboedu.com/sxjy/jybz/4227.html">订单培养</a></div>
<div><a href="http://www.amboedu.com/sxjy/jybz_4232.html">支持企业</a></div>
<div><a href="http://www.amboedu.com/sxjy/jybz_4231.html">服务流程</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.amboedu.com/trainning" target='_blank'>职场训练营</a></dt>
<dd>
<div><a
href="http://chat.looyu.com/chat/chat/p.do?c=12810&f=64311&n=miiceic"
target='_blank'>在线咨询</a></div>
<div><a href="http://www.amboedu.com/baoming/bm.html" target='_blank'>在线报名</a></div>
</dd>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a
href="http://chat.looyu.com/chat/chat/p.do?c=12810&f=64311&
n=miiceic">招生问答</a></dt>
</dl>
<dl onmouseover="SubOn(this)" onmouseout="SubOut(this)" >
<dt><a href="http://www.miiceic.org.cn/other/74.html">联系我们</a></dt>
</dl>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var obj=document.getElementById("Mainmenu").getElementsByTagName("dl");
function SubOn(theDl){
for(var i=0;i< obj.length;i++ ){
obj.className='';
}
theDl.className='choose';
;
document.getElementById("searchselect").style.display='none';
}
function SubOut(theDl){
for(var i=0;i< obj.length;i++ ){
obj.className='';
}
theDl.className='over';
document.getElementById("searchselect").style.display='';
}
//-->
</SCRIPT>
</div>
</body>
</html>
查看效果：http://www.miiceic.org.cn/eg/eg1/caidan.html
- 大小: 31.6 KB
分享到：
相关推荐
非常实用的下拉菜单，很好用的，快来下载呀
纯CSS下拉菜单 不需要JS 效果不错！ 从某外国网站上直接弄下来的！
漂亮的基于jQuery实用下拉菜单代码 JQuery,div+css,网页特效,广告设计
js 特效 html 特效 简单实用的下拉菜单 js 特效 html 特效 简单实用的下拉菜单
很实用的二级下拉菜单！很实用的哦！很实用的二级下拉菜单！很实用的哦！
漂亮的下拉菜单效果
1.非常优秀的下拉菜单DIV+CSS源码 2.蛮实用的，可以二次开发
可控制下拉方向的jQuery下拉菜单，非常实用，可设置导航菜单显示二级栏目的方向，可设置上拉和下拉。
无限级下拉菜单(ASP-AJAX-JS),非常实用。
实用css代码精选-适合中于底部下拉菜单
这又是款基于CSS3的下拉菜单，这款CSS3菜单是手风琴样式的，关于手风琴菜单，大家也可以回顾一下这款CSS3手风琴菜单 可同时折叠多个菜单。今天的这款CSS3手风琴菜单也类似，...应该说，这款CSS3手风琴菜单非常的实用。
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码，Bootstrap自适应电脑手机端导航下拉菜单网页特效。
jQuery手机端无限级导航下拉菜单代码是一款很实用的移动端多级下拉菜单代码，支持无限级子菜单展开收缩。
支持FF、IE6下面很实用的三级下拉菜单
纯JS写的19种下拉菜单导航效果！很漂亮的 里面写有说明！自己研究着做吧！下拉菜单，JS下拉菜单！ 好用实用的下拉菜单
简单大气的二级下拉菜单，很实用，欢迎需要的朋友下载。简单大气的二级下拉菜单，很实用，欢迎需要的朋友下载。简单大气的二级下拉菜单，很实用，欢迎需要的朋友下载。简单大气的二级下拉菜单，很实用，欢迎需要的...
点击下拉菜单，手风琴效果很漂亮实用。。直接拿去改改很容易就可以用，
非常实用的，流行的下拉菜单，下载即用的jquery插件！
之前我们分享过非常多的jQuery/CSS3下拉菜单插件，有些非常实用，比如这款HTML5/CSS3水平二级下拉菜单，也有的非常炫酷，比如这款jQuery/CSS3波浪形弹性下拉菜单。今天我们要介绍的是另外一款下拉菜单导航，它是纯...
三级下拉列表菜单,就是选择地址效果,即 中国 四川 成都,实用