实用下拉菜单

jjklmm

浏览: 57216 次
性别:
来自: 北京

最近访客更多访客>>

jk_zero

dagf113225

zhifux868

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web html css
javascript

javascript css

效果查看地址：http://www.miiceic.org.cn/eg/eg8/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">
body{background:url(bodybg.gif) repeat-x #c5e3ff;margin:0;padding:0;}
#menu{width:950px; height:32px; margin:0 auto; margin-top:9px;}
#menu ul{list-style:none; margin:0; padding:0;}
#menu li { height:32px; width:80px; float:left; margin:0 5px; font-size:14px; line-height:32px; font-weight:bold; text-align:center; color:#FFF;}
#menu li a{ height:32px; width:80px; float:left; margin:0 5px; font-size:14px; line-height:32px; font-weight:bold; text-align:center; color:#1d6ab8; text-decoration:none;background:url(menu.gif);}
#menu li a:hover{text-decoration:underline; background:url(menu.gif); color:#1d6ab8;}
#menu li a img{vertical-align:middle;}
.menut{position: absolute;display:none;}
.menut a:link{color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:visited {color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:hover {color:#fdfeff;font-size:12px;font-weight:bold;}
.menut a:active {color:#fdfeff;font-size:12px;font-weight:bold;}
.STYLEw {color: #4D7CB0;font-weight: bold;}
</style>
<body>
<div id="menu">
<ul><li><a href="http://www.miiceic.org.cn/">首页</a></li>
<li><a href="http://www.miiceic.org.cn/kecheng/" id="dha" onMouseOver="m_over(this,2)" onMouseOut="m_out(this)">高端课程<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/">企业培训</a></li>
<li><a href="http://www.miiceic.org.cn/gongkaike/" id="dha" onMouseOver="m_over(this,4)" onMouseOut="m_out(this)">公开课<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/dingzhi/">企业内训</a></li>
<li><a href="http://www.miiceic.org.cn/tuandui/" id="dha" onMouseOver="m_over(this,1)" onMouseOut="m_out(this)">专家团队<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/anli/" id="dha" onMouseOver="m_over(this,3)" onMouseOut="m_out(this)">经典案例<font style="color:#6e2550;font-size:8px;">▽</font></a></li>
<li><a href="http://www.miiceic.org.cn/vip/5346.html">VIP会员服务</a></li>
<li><a href="http://www.miiceic.org.cn/jigou/92.html">合作机构</a></li>
</ul>
</div>
<div id="menu21" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
    <td align="center" valign="top" bgcolor="#54a4de">

      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">台湾顾问</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">中程专家</a></span></td>
        </tr>
      </table>

    </td>
</tr>
</table>
</div>

<div id="menu22" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
    <td align="center" valign="top" bgcolor="#54a4de">
      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">嵌入式培训</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">3G Android培训</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">动漫培训</a></span></td>
        </tr>
      </table>
    </td>
</tr>
</table>
</div>
<div id="menu23" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
    <td align="center" valign="top" bgcolor="#54a4de">
      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">公开课案例</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">企业内训案例</a></span></td>
        </tr>
      </table>
    </td>
</tr>
</table>
</div>
<div id="menu24" class="menut" onMouseOver="sm_over(this)" onMouseOut="m_out(this)">
<table width="100" border="0" cellspacing="0" cellpadding="0" style="border:#4593cd solid 1px;">
<tr>
    <td align="center" valign="top" bgcolor="#54a4de">
      <table width="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px;"><span class="STYLEt"><a href="#">最新公开课</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">课程预告</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">公开课大全</a></span></td>
        </tr>
        <tr>
          <td height="32" align="left" style="padding-left:10px; border-bottom:#7bc1f3 solid 1px; border-top:#3e87c6 solid 1px;"><span class="STYLEt"> <a href="#">课程表</a></span></td>
        </tr>
      </table>
    </td>
</tr>
</table>
</div>
</body>
</html>
<script language="javascript">
var tm;
var menu_now;
function m_over(id,p){
    if(tm){
        clearTimeout(tm);
        display(false);
    }
    if(p){
        menu_now="menu2"+p;
        menu_now=document.getElementById(menu_now);
        var cc;
        switch (p){
        case 2: cc=-10;
        break;
        default:cc=0;
        }
        menu_now.style.top=gettop(id)+28+"px";
        if (menu_now=="menu22"){
           menu_now.style.left="10px";
        }
        else{
        menu_now.style.left=getleft(id)+cc+"px";
        }
        display(true);
    }
}
function m_out(id){
    id.style.backgroundImage="";
    tm=setTimeout("display(false)",500);
}
function gettop(id){
    var tt=id.offsetTop;
    while(id = id.offsetParent){
       tt+=id.offsetTop;
    }
    return tt;
}
function getleft(id){
    var ll=id.offsetLeft;
    while(id = id.offsetParent){
       ll+=id.offsetLeft;
    }
    return ll;
}
function display(zhi){
    if(menu_now){
        menu_now.style.display=zhi?"block":"none";
    }
}
function sm_over(id){
    if (tm){
       clearTimeout(tm);
    }
    display(true);
}
function sm_out(){
   if (tm){
      clearTimeout(tm);
    }
    display(false);
}
</script>

效果查看地址：http://www.miiceic.org.cn/eg/eg8/caidan.html

查看图片附件

1
顶

3
踩

分享到：

实用搜索框样式 | javascript 信息提示框

2011-12-31 09:06
浏览 1123
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论