<!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. 高并发之限流RateLimiter（二）

    Guava RateLimiter提供了令牌桶算法实现:平滑突发限流(SmoothBursty)和平滑预热限流(SmoothWarmingUp)实现. SmoothBursty:令牌生成速度恒定 @T ...

  2. xml ----> 几个常用dtd头文件模板

    环境: idea ce 2018.1 "File --> settings... --> Editor --> file and code templates" ...

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

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

  4. 03 flask数据库操作、flask-session、蓝图

    ORM ORM 全拼Object-Relation Mapping,中文意为 对象-关系映射.主要实现模型对象到关系数据库数据的映射. 1.优点 : 只需要面向对象编程, 不需要面向数据库编写代码. ...

  5. HTML 弹出遮罩层一（遮罩层和内容标签嵌套）

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

  6. 【洛谷p1932】A+B A-B A*B A/B A%B Problem

    (emmmm) 这道题成功让我见识到了Dev撤回的高端大气上档(dàng)次. A+B A-B A*B A/B A%B Problem[传送门](真是个优秀的高精) 算法:::::::(模板题弄这么费 ...

  7. Tanya and Password CodeForces - 508D (欧拉回路)

    大意:给定n个长为3的子串, 求一个长为n+2的字符串包含所有子串. 相邻两个字符开一个节点, 建图跑欧拉回路, 若存在的话长度一定是$\le n+2$.

  8. 牛客寒假算法基础集训营6 J-迷宫

    题目请点这里 分析:这是一道BFS的模板题,构造一个队列,将每个满足条件的(不超过边界,不超过左右移动次数的限制)位置推入队列,如果不是障碍物且没到达过,就将可到达位置的个数加1 此外,注意这里的输入 ...

  9. PostgreSQL查看表大小的命令

    SELECT table_name, pg_size_pretty(table_size) AS table_size, pg_size_pretty(indexes_size) AS indexes ...

  10. linux使用lvresize和resize2fs调整lv大小

    以下操作基于场景:有两个同vg的lv(applv和rootlv),我们需要从applv腾出1G给rootlv. 1.缩小applv磁盘 lvresize -L -1G /dev/mapper/myvg ...