<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none; }
</style>
 <script type="text/javascript">
        function ShowSub(li) {
            var subMenu =  li.getElementsByTagName("ul")[0]  ;
            subMenu.style.display = "block";
        }

function HideSub(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }

</script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover='ShowSub(this)' onmouseout='HideSub(this)'  ><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li ? ><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">实例练习</a></li>
         <li><a href="#">问与答</a></li>
     </ul>  
 
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>

JS控制显示/隐藏二级菜单的更多相关文章

  1. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  4. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  5. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  6. js中按钮控制显示隐藏以及下拉功能

    <script> function show() { var a2=document.getElementById("div2"); if(a2.style.displ ...

  7. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  8. js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

    点击出现二级菜单 *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; c ...

  9. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

随机推荐

  1. Rpgmakermv（38）MOG_Theatrhythm

    1.============================葡萄牙语=================================================+++ MOG - Theatrh ...

  2. 09 查找列表中元素，移除每个元素的空格，并查找以a或A开头并且以c结尾的所有元素

    li = ["alex"," aric","Alex","Tony","rain"]for i in ...

  3. html5-label标签

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. Glorious Brilliance (最短路 + 带权二分图匹配)

    这是一道代码大题.一开始读错题意了,然后理解成直接看上去的那种相邻,然后想不通好久!!! 把不同联通的图分离出来,然后先预处理一下形成之后的相邻图的状态,然后根据01确定哪一些是需要更换状态的,然后建 ...

  5. SLAM学习笔记 - 世界坐标系到相机坐标系的变换

    参考自: http://blog.csdn.net/yangdashi888/article/details/51356385 http://blog.csdn.net/li_007/article/ ...

  6. JAVA基础2---深度解析A++和++A的区别

    我们都知道JAVA中A++和++A在用法上的区别,都是自增,A++是先取值再自增,++A是先自增再取值,那么为什么会是这样的呢? 1.关于A++和++A的区别,下面的来看个例子: public cla ...

  7. c# 控件的基类——Control

    控件的基类用于Windows窗体应用的控件都派生自Control类,并继承了许多通用成员,这些成员都是平时使用控件的过程中最常用的. Name:控件实例的名字,通常通过“属性”窗口设置,控件实例名称变 ...

  8. web前端学习路线（含20个真实web开发项目集合）

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  9. 计算概论（A）/基础编程练习（数据成分）/2:奥运奖牌计数

    #include<stdio.h> int main() { // n天的决赛项目 int n; scanf("%d",&n); ] = {}; while ( ...

  10. ltp makefile 解析

    困惑于 /include/mk/automake.mk中出现了第一个目标 而makefile却任然将all当做最终目标 测试了一番后发觉: ifeq ($(MAKE_3_80_COMPAT),1)# ...