查看效果：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
分享到：
相关推荐
1. `readme.htm`：这通常是一个包含项目介绍、安装指南或使用说明的文件，对于理解如何使用下拉菜单非常有帮助。 2. `index.html`：这是网站的主页面，很可能包含了下拉菜单的实际示例代码，我们可以从中学习到下拉...
本文将深入探讨一个基于jQuery的实用下拉菜单代码，结合了div+css技术，实现了美观且功能强大的效果，适用于网页设计和广告设计场景。 首先，jQuery是一个流行的JavaScript库，它的出现大大简化了JavaScript的使用...
在网页设计中，交互性和用户体验是非常重要的因素，而下拉菜单是提高用户导航效率的常见设计元素。jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现动态、交互式的页面效果，其中包括多级下拉菜单的创建。...
纯CSS下拉菜单 不需要JS 效果不错！ 从某外国网站上直接弄下来的！
在Excel中创建二级下拉菜单是一项实用技巧，它可以帮助我们整理和输入数据，提高工作效率，尤其是在处理分类数据时。下面将详细介绍如何实现二级下拉菜单的简单做法。 首先，我们需要理解二级下拉菜单的基本概念。...
在这个"非常小巧的JS下拉菜单代码"项目中，我们可以看到一个简洁而实用的下拉菜单解决方案。 首先，我们要理解JS（JavaScript）是Web开发中的脚本语言，主要用于处理客户端的交互。jQuery则是一个基于JS的库，简化...
js 特效 html 特效 简单实用的下拉菜单 js 特效 html 特效 简单实用的下拉菜单
本资源提供了“漂亮的jquery实用的下拉菜单导航条代码”，旨在帮助开发者实现美观且功能强大的下拉菜单导航条。下面将详细探讨jQuery下拉菜单的实现原理、相关知识点以及如何运用这些代码。 jQuery是一个轻量级的...
在网页设计中，二级下拉菜单是一种常见的交互元素，它为用户提供了一种高效的方式来组织和导航复杂的菜单结构。尤其在网站或应用的顶部导航栏中，二级下拉菜单经常用于展示多层次的分类或子菜单，使得用户能更快地...
在网页设计中，交互性和用户体验是非常重要的因素，而弹出下拉菜单是实现这一目标的常见方式之一。本文将深入探讨如何使用Jquery技术来创建一个鼠标悬停时弹出，鼠标移开后关闭的下拉菜单，并提供相关组件的详细讲解...
总结，layui树形下拉菜单实例展示了如何利用layui的tree组件创建一个实用的交互式下拉菜单。通过理解初始化、动态赋值和获取选中值的原理，我们可以灵活地构建适应各种场景的应用。这个实例的压缩包文件名“tree”...
总之，网站后台下拉菜单是一种高效且直观的导航工具，通过结合HTML、CSS和JavaScript可以实现各种美观且实用的效果。在实际项目中，理解并掌握下拉菜单的实现原理和优化方法，将有助于提升用户体验，使网站后台更加...
在网页设计中，交互性和用户体验是非常关键的元素之一，而多级下拉菜单则是实现这一目标的有效工具。jQuery，一个广泛使用的JavaScript库，为开发者提供了简单、强大的API来创建动态和交互性的网页效果，其中包括...
本资源“实用css代码精选-适合中于底部下拉菜单”聚焦于一个常见的交互设计元素——底部下拉菜单，这对于构建响应式和用户友好的网站至关重要。 底部下拉菜单通常用于移动设备或页面底部的导航栏，它允许用户在有限...
总之，纯HTML+CSS制作的三级下拉菜单是一个实用的网页设计技巧，通过HTML的结构化标签和CSS的样式控制，可以创建出用户友好的导航界面。理解这个过程不仅有助于提升网页设计技能，还能为构建更复杂的交互功能打下...
手机端下拉菜单是移动端应用设计中常见的交互元素，它在有限的屏幕空间内提供了便捷的导航...在实现过程中，开发者需要注意适配不同设备的屏幕尺寸，优化触摸操作，以及确保动画流畅，以创造出既美观又实用的下拉菜单。
3级下拉菜单是网页设计中的重要组成部分，理解其设计原则和实现技术，能帮助我们创建出既美观又实用的导航系统，提升用户在网站上的浏览体验。在实际操作中，可以根据项目需求选择合适的方法，不断优化和完善，以...
本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求，提供了一种既美观又流畅的解决方案。 首先，jQuery是一种轻量级、高性能的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作以及...
本篇文章将深入分析一份“非常优秀的下拉菜单 DIV+CSS 源码”，该源码通过纯 CSS 实现了一个简洁且实用的下拉菜单效果。下拉菜单在网页设计中非常常见，尤其是在导航栏的设计上，它可以帮助用户快速找到所需的信息或...
下拉菜单是网页设计中常见的交互元素，它用于在有限的空间内展示多个选项，提高页面的可用性和用户体验。...通过灵活运用这三种技术，我们可以创建出既美观又实用的下拉菜单，提升用户在网页中的操作体验。