当前位置： 代码迷 >> Web前端 >> 非常实用的上拉菜单
  详细解决方案

非常实用的上拉菜单

热度：275   发布时间：2012-11-23 22:54:33.0
非常实用的下拉菜单

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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.