欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

Javascript企业网站二级菜单效果

       导航     2016-02-16     eycms     33     0    

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=gb2312">


<TITLE>Javascript二级菜单效果 </TITLE>

<STYLE type="text/css">

body {

margin-top: 0px;

margin-left: 0px;

margin-right: 0px;

margin-bottom: 0px;

font-size:12px;

text-align:center;

}


/*招聘公司页面样式*/

.div-link {

FONT-SIZE: 12px; 

COLOR: #000000; 

TEXT-DECORATION: none;

    background-color:#dfdfdf;

border-left:1 #FFFFFF solid;

display:block;

height:22px;

line-height:22px;

text-align:center;

border-bottom:1 #FFFFFF solid;

}

.div-link:hover {

FONT-SIZE: 12px;

COLOR: #FFFFFF;

    background-color:#cc0000;

    width:93px;

height:22px;

line-height:22px;

text-align:center;

}


.company-hide{

     text-align:center;

position:absolute;

display:none;

}

.company-hide ul {

margin: 0px;

padding: 0px;

list-style-type: none;

list-style-image:none;

}


/*网页底部样式*/

/*导航层样式*/

.bottom-bg{

           color:#ffffff;

           padding-top:9px;

           text-align:center;

           background-image:url(images/bottom-bg.gif);

  height:35px;

           overflow:hidden;

  width:730px;

  margin:0px auto;

           }


/*最底下方文本层样式*/  

.bottom{

        color:#414141;

        line-height:20px;

        text-align:center;

width:1000px;

  }

</STYLE>

<SCRIPT language="Javascript">

function show(d1){

document.getElementById(d1).style.display='block';  //显示层

}


function hide(d1){

document.getElementById(d1).style.display='none';  //隐藏层

}


</SCRIPT>

<SCRIPT src="Scripts/AC_RunActiveContent.js" type="text/javascript"></SCRIPT>

</HEAD>

<BODY>


<DIV>

  <!--头部及菜单-->

  <DIV><TABLE width="730" border="0" cellspacing="0" cellpadding="0" align="center">

    <TR>

      <TD  bgColor="#e5e5e5" height="60"><DIV style="float:left; padding-left:10px;"><img  src="images/zx-banner.gif">

       </TD>

    </TR>

    <TR><TD height="1"></TD></TR>

    <TR>

      <TD><TABLE width="100%" border="0" cellspacing="0" cellpadding="0" align="center">

  <TR><TD width="172" bgcolor="#dfdfdf" align="center" ><A href="#" style="font-size:12px; text-decoration:none">首 页</A></TD>

      <TD width="93"><A href="#" class="div-link"  onMouseOver="show('s1')" onMouseOut="hide('s1')">关于中信</A></TD>

      <TD width="93"><A href="#" class="div-link" onMouseOver="show('s2')" onMouseOut="hide('s2')">公司业务</A></TD>

      <TD width="93"><A href="#" class="div-link" onMouseOver="show('s3')" onMouseOut="hide('s3')">公益事业</A></TD>

 <TD width="93"><A href="#" class="div-link"  onMouseOver="show('s4')" onMouseOut="hide('s4')">研究</A></TD>

      <TD width="93"><A href="#" class="div-link" onMouseOver="show('s5')" onMouseOut="hide('s5')">推荐招聘</A></TD>

      <TD width="93"><A href="#" class="div-link" onMouseOver="show('s6')" onMouseOut="hide('s6')">特色推荐</A></TD>

   </TR>

        <TR><TD></TD>

      <TD>

      <DIV class="company-hide" id="s1" onMouseOver="show('s1')" onMouseOut="hide('s1')">

      <UL>

      <LI>

      <A href="#" class="div-link">公司简介</A></LI>

      <LI><A href="#" class="div-link">集团领导</A></LI>

      <LI><A href="#" class="div-link">领导题词</A></LI>

     <LI> <A href="#" class="div-link">业务回顾</A></LI>

      <LI><A href="#" class="div-link">公司历史</A></LI>

      <LI><A href="#" class="div-link">中信风格</A></LI>

      <LI><A href="#" class="div-link">公司年报</A></LI>

      <LI><A href="#" class="div-link">公司要闻</A>

      </LI>

      </UL>

      </DIV>

      </TD>

      <TD>

      <DIV  class="company-hide" id="s2"    onMouseOver="show('s2')" onMouseOut="hide('s2')">

     <UL>

     <LI><A href="#" class="div-link">金融</A></LI>

      <LI><A href="#" class="div-link">金融</A></LI>

      </UL>

      </DIV>

      </TD>

      <TD>

      <DIV  class="company-hide" id="s3"    onMouseOver="show('s3')" onMouseOut="hide('s3')">

      <UL>

      <LI><A href="#" class="div-link">扶</A></LI>

      <LI><A href="#" class="div-link">绿</A></LI>

      <LI><A href="#" class="div-link">援</A></LI>

      </UL>

      </DIV>

      </TD>

  <TD><DIV class="company-hide"  id="s4" onMouseOver="show('s4')" onMouseOut="hide('s4')"></DIV></TD>

      <TD><DIV  class="company-hide" id="s5"    onMouseOver="show('s5')" onMouseOut="hide('s5')"></DIV></TD>

      <TD>

      <DIV  class="company-hide" id="s6"    onMouseOver="show('s6')" onMouseOut="hide('s6')">

      <UL>

      <LI><A href="#" class="div-link">网</A></LI>

      <LI><A href="#" class="div-link">出版</A></LI>

      <LI><A href="#" class="div-link">服务</A></LI>

      </UL>

      </DIV>

      </TD>

    </TR></TABLE></TD>

    </TR>

  </TABLE>

  </DIV>

 

</BODY>

</HTML></td>

 </tr>

</table>


--结束END--

本文链接: http://www.eycms.cn/resources/navigation/1119.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端