<!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. 解释变量（Explanatory Variable）

    转自:http://www.statisticshowto.com/explanatory-variable/ What is an Explanatory Variable? An explanat ...

  2. JSON格式简介

    一.JSON:JavaScript Object Notation的简写,是一种轻量级数据交换格式. 二.数据类型:标量.序列(数组).映射(key-value) 三.JSON的四个原则 1 .并列数 ...

  3. 使用jquery-form进行文件上传

    jquery.form.js是一个form插件,支持ajax表单提交和ajax上传. 使用时,需要在代码中添加如下: <script src="http://malsup.github ...

  4. python3-知识扩展扫盲易忘-map,collections.Counter()的用法

    map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. >> ...

  5. codeforces 578a//A Problem about Polyline// Codeforces Round #320 (Div. 1)

    题意:一个等腰直角三角形一样的周期函数(只有x+轴),经过给定的点(a,b),并且半周期为X,使X尽量大,问X最大为多少? 如果a=b,结果就为b 如果a<b无解. 否则,b/(2*k*x-a) ...

  6. Nginx安装与使用 及在redhat 中的简单安装方式

    首先说下在redhat中的安装方法, 正常安装nginx 需要安装很多的依赖,最后再安装nginx,而且很容易出错. 在nginx官方上有这么一段描述: Pre-Built Packages for ...

  7. CF438D 线段树 区间求和，区间求膜，单点更新

    题目链接 题目大意: 给定一个长度为n的序列,要求能够执行m次下列操作: 1.查询区间[l,r]的和 2.将区间[l,r]的每一个数%=mod 3.修改第x个数为y 操作1,3都是线段树的基本操作,线 ...

  8. spring boot 创建web项目并使用jsp作前台页面

    参考链接:https://www.cnblogs.com/sxdcgaq8080/p/7712874.html

  9. leetcode-algorithms-2 Add Two Numbers

    leetcode-algorithms-2 Add Two Numbers You are given two non-empty linked lists representing two non- ...

  10. mybatis的update使用选择

    更新后台设置时,会分多个页面更新同一个表中的数据,愿想是尽量减少sql请求数据量并且减少重复代码. 比如博客园的: 假如只有一个用户信息表,这样的话每个页面只更新部分字段. 这种情况下的更新推荐在xm ...