<!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. English Voice of <<Dream it passible>>

    Dream It Possible(梦想成为可能) - DelaceyI will run I will climb I will soar.我奔跑,我攀爬 我要飞翔.I'm undefeated我所 ...

  2. You Don't Know JS: Async & Performance（第3章， Promises）（未看）

    Chapter 3: Promises But what if we could uninvert that inversion of control? What if instead of hand ...

  3. android------DDMS files not found: tools\hprof-conv.exe

    好久没有Eclipse了,使用一下就遇到坑,使用eclipse突然发生这个问题:DDMS files not found: ***\sdk\tools\hprof-conv.exe,无法连接模拟器 在 ...

  4. Spring Batch 体系结构

    Spring Batch 设计的时候充分考虑了可扩展性和各类终端用户. 下图显示了 Spring Batch 的架构层次示意图,这种架构层次为终端用户开发者提供了很好的扩展性与易用性. 上图显示的是 ...

  5. 利用adb截图然后传到电脑

    首先配置好adb环境变量 然后adb devices查看是否连接手机,记得把手机调成开发者模式. 截屏 adb shell /system/bin/screencap -p 路径/文件名.后缀名 ad ...

  6. vue的优点

    vue-router 单页面 虚拟DOM https://www.cnblogs.com/oldboyooxx/p/9186482.html

  7. bzoj3675

    题解:首先要明确一件事,就是当分割的方案固定时,无论先分割的哪一段,结果都是不变的,然后能列出dp方程:\(dp[i][j]=max(dp[k][j-1]+(a[i]-a[k])*(a[n]-a[i] ...

  8. 15. 3Sum C++

    参考资料: https://leetcode.com/problems/3sum/discuss/7402/Share-my-AC-C%2B%2B-solution-around-50ms-O(N*N ...

  9. 浅谈XXE漏洞攻击与防御——本质上就是注入，盗取数据用

    浅谈XXE漏洞攻击与防御 from:https://thief.one/2017/06/20/1/ XML基础 在介绍xxe漏洞前,先学习温顾一下XML的基础知识.XML被设计为传输和存储数据,其焦点 ...

  10. rsyslog的配置文件使用方法

    参考地址: http://www.rsyslog.com/doc/v8-stable/configuration/property_replacer.html rsyslog消息模板的定义规则 &qu ...