<!DOCTYPE html>

<html>

  <head>

    <title>下拉菜单示例</title>

	<script language="javaScript">

	    function show(menu)

	        {document.getElementById(menu).style.visibility="visible";}

	    function hide(){

	        document.getElementById("menu1").style.visibility="hidden";

	        document.getElementById("menu2").style.visibility="hidden";

	        document.getElementById("menu3").style.visibility="hidden";

	    }

	</script>

  </head>

  <body>

   <table>

       <tr bgcolor="#9999FF"align="center">

       <td width="120"onMouseMove="show('menu1')"onMouseOut="hide()">系列课程</td>

       <td width="120"onMouseMove="show('menu2')"onMouseOut="hide()">教学课程</td>

       <td width="120"onMouseMove="show('menu3')"onMouseOut="hide()">课程大纲</td>

       </tr>

   </table>

   <div id="menu1"onMouseMove="show('menu1')"onMouseOut="hide()"

       style="background:#9999FF;position:absolute;left:12;top:38;width:120;visibility:hidden">

       <span>c++程序设计</span><br>

       <span>java程序设计</span><br>

       <span>c#程序设计</span><br>

   </div>

   <div id="menu2"onMouseMove="show('menu2')"onMouseOut="hide()"

       style="background:#9999FF;position:absolute;left:137;top:38;width:120;visibility:hidden">

       <span>c++课件</span><br>

       <span>java课件</span><br>

       <span>c#课件</span><br>

   </div>

   <div id="menu3"onMouseMove="show('menu3')"onMouseOut="hide()"

       style="background:#9999FF;position:absolute;left:260;top:38;width:120;visibility:hidden">

       <span>c++教学大纲</span><br>

       <span>java教学大纲</span><br>

       <span>c#教学大纲</span><br>

   </div>

  </body>

</html>

　　

JavaScript+CSS+DIV实现下拉菜单示例的更多相关文章

  1. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  2. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  3. 第一百三十二节，JavaScript，封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  4. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  5. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  6. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  7. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  8. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

随机推荐

  1. 线性代数 | Linear Algebra

    网上说<线性代数应该这样学>非常不错,再配合大学教材,把线性代数的基本知识点过一遍. 线性代数 - 知乎 最近在跟一个教程:李宏毅的线性代数 基本知识: Rn :We denote the ...

  2. English trip V1 - 21. I dreamed dream Teacher:Corrine Key: past tense（过去式）

    In this lesson you will learn to describe an experience.  本课将会学习描述一次经历 课上内容(Lesson) 词汇(Key Word ) # ...

  3. gitignore有时候为啥过滤不了文件或目录

    一.问题介绍 使用Git过程中,有时候我们想过滤项目中的部分文件,在.gitignore中加入该文件名称或该文件所在目录的名称,比如我们的项目日志文件(.log文件) 但是有时候发现不管用.不好使. ...

  4. caffe 动态库 Release X64

    Release X64平台 createdll.h#ifndef CREARDLL_H_#define CREARDLL_H_ extern "C" _declspec(dllex ...

  5. Lua常用封装方法

    Lua 获取随机值 --获取随机值,指定上限和下限 function getRandom(min,max) -- 接收一个整数n作为随即序列的种子 math.randomseed(os.time()) ...

  6. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  7. 【模板/经典题型】FWT

    FWT在三种位运算下都满足FWT(a×b)=FWT(a)*FWT(b) 其中or卷积和and卷积还可以通过FMT实现(本质上就是个高维前缀和) #include<bits/stdc++.h> ...

  8. Roman To Integer leetcode java

    问题描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...

  9. React文档（六）state和生命周期

    想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...

  10. ubuntu开启慢日志

    ubuntu 开启mysql日志记录 1.找到mysql的配置文件sudo vim /etc/mysql/my.cnf将下面两行的#去掉#general_log_file = /var/log/mys ...