javascript鼠标滑过显示二级菜单特效

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果，供大家参考，具体内容如下

1. 关键代码：使用 switch 或 if 判断语句，改变对应的二级菜单显示方式为 block 或 none

function selectTabMenu(i){
　　switch(i){
　　　　case 71:  
　　　　　　document.getElementById("TabMenuCon71").style.display="block";
   document.getElementById("TabMenuCon72").style.display="none";
   document.getElementById("TabMenuCon73").style.display="none";
   document.getElementById("TabMenuCon74").style.display="none";
   document.getElementById("TabMenuCon75").style.display="none";
   document.getElementById("TabMenuCon76").style.display="none";
   break;
　　　　 　 ...
　　}
}

2. 主导航 绑定事件

　　
• 首页



3. 二级菜单

　　
公告
　　
<信息

4. 完整代码

 
 
 
 *{
  padding:0px;
  margin: 0px;
 }
 .navBar{
  height: 30px;
  background-color: #2B383E;
  text-align: center;
 }
 ul{
  list-style: none;
 }
 .nav li{
  float: left;
 
 }
 .nav li a{
  display: block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
 }
 .nav li a:hover{
  background-color: #fff;
  color: #4DB6E7
 }
 .TabMenuCon{
  clear: both;
  display: none;
 }
 .TabMenuCon li{
  display: inline-block;
 }
 

 


 
 

  
首页
  
关于协会
  
协会动态
  
协会活动
  
会员
  
资源空间
 
 
 
 
 

  
公告
  
<信息
 
 

  
协会简介
  
组织机构
  
协会章程
 
 

  
协会新闻
  
活动预告
  
求职招聘
 
 

  
义务维修月
  
平面设计活动
  
程序设计活动
  
户外拓展
 
 

  
会员登录
  
会员注册
  
缴纳会费
  
会员信息管理
  
修改密码
 
 

  
PS教程
  
前端设计
  
Flash教程
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助。