<!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. spring boot ----> jpa连接和操作mysql数据库

    环境: centos6.8,jdk1.8.0_172,maven3.5.4,vim,spring boot 1.5.13,mysql-5.7.23 1.引入jpa起步依赖和mysql驱动jar包 &l ...

  2. Hibernate相关的查询 --Hibernate框架基础

    接着上一篇博文:Hibernate第一个程序(最基础的增删改查) --Hibernate本例是对Hibernate查询的扩展,使用HQL语句查询 /** * HQL添加预先需要保存的测试数据 */ @ ...

  3. 在mk/rte.app.mk 256行加echo $(O_TO_EXE_DO)查看GCC参数

    在mk/rte.app.mk 256行加echo $(O_TO_EXE_DO)查看GCC参数,如:

  4. PAT 1019 General Palindromic Number

    1019 General Palindromic Number (20 分)   A number that will be the same when it is written forwards ...

  5. InnoDB存储引擎介绍-(6) 二. Innodb Antelope文件格式

    InnoDB存储引擎和大多数数据库一样(如Oracle和Microsoft SQL Server数据库),记录是以行的形式存储的.这意味着页中保存着表中一行行的数据.到MySQL 5.1时,InnoD ...

  6. python中json的使用

    在编写接口传递数据时,往往需要使用JSON对数据进行封装.python和json数据类型的转换,看作为编码与解码. 编码:json.dumps() Python JSON dict object li ...

  7. zzw原创_Red Hat Enterprise Linux Server release 6.5 安装mysql5.5.28版本

    1.查看系统版本 [root@ip12189 ~]#  more /etc/issueRed Hat Enterprise Linux Server release 6.5 (Santiago)Ker ...

  8. vue虚拟DOM源码学习-vnode的挂载和更新流程

    代码如下: <div id="app"> {{someVar}} </div> <script type="text/javascript& ...

  9. maven打包上传到本地中央库

    pom文件中添加插件如下 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...

  10. Dagger2不自动生成daggerXXXcomponent

    在Fragment里面初始化dagger2创建对象时,不自动生成daggerXXXcomponent. 百思不得其解,后来发现是import android.app.Fragment;所以不自动生成. ...