<!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. Processing 与 C 相同和不同的地方

    Processing 与 C Processing 语言和其他语言有很多相似之处,这是它作为一种计算机语言的特征,同时,Processing 用于艺术创作,所以也有一些专用的函数. 相同的几点: 作为 ...

  2. Getting started with Processing 示例11-9 追随鼠标移动

    程序片段 int num = 60; int[] x = new int[num]; int[] y = new int[num]; void setup(){ size(240,120); noSt ...

  3. linux进程管理之优先级

    进程优先级 nice ==================================================================================== Linu ...

  4. hdu-2419 Boring Game

    http://acm.hdu.edu.cn/showproblem.php?pid=2419 给一个图,预分配点值.随后有三种操作,F u v查询与u联通部分大于等于v的最小的数,没有则返回0,U u ...

  5. SSH登录服务器修改VNC的问题

    远程登陆服务器直接用 ssh hostname@ip_address 即可登陆.hostname就是自己的用户名,ip_address就是IP地址. 关于VNC使用的命令: 杀死VNC: vncser ...

  6. python – time.sleep – 睡眠线程

    import time from threading import Thread class worker(Thread): def run(self): for x in xrange(0,11): ...

  7. python-django rest framework框架之解析器

    1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. class UsersView(APIView): def get(self,request,*ar ...

  8. python-day81--Ajax

    一.准备知识:json 1.什么是json? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.任何的语言之间都可以用json进行数据的交 ...

  9. 安卓——Activity生命周期、

    在xml 设计页面添加标签 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...

  10. CF-877E-线段树+哈希

    http://codeforces.com/problemset/problem/877/E 给出一颗有根树,没个节点上有一个值0/1,有两种操作,一个是选中一个节点,对他所对应的那个子树上所有节点的 ...