繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
表单特效
→ 正文内容
下拉菜单
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <style type="text/css"> <!-- ul {margin: 0px;padding: 0px;list-style: none;width: 120px;border-bottom: 1px solid #777;} ul li {position: relative;} li ul {position: absolute;left: 119px;top: 0px;display: none; } ul li a {display: block;font-size: 12px;text-decoration: none;color: #333;background-color: #FFF;padding: 5px;border: 1px solid #777;border-bottom: 0px;} /* Fix IE. Hide from IE Mac \*/ * html ul li {float: left;height: 1%;} * html ul li a {height: 1%;} /* End */ li:hover ul, li.over ul {display: block;} --> </style> <script language="javascript" type="text/javascript"> <!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className += " over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload = startList; --> </script> </head> <body> <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">组织机构</a></li> <li><a href="#">企业历程</a></li> </ul> </li> <li><a href="#">服务内容</a> <ul> <li><a href="#">网站建设</a></li> <li><a href="#">网站推广</a></li> <li><a href="#">域名空间</a></li> <li><a href="#">企业信箱</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">温州总部</a></li> <li><a href="#">瑞安分部</a></li> <li><a href="#">乐清分部</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
下拉菜单延迟消失
百度中搜索更多的关于
下拉菜单
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
文章来源
0
顶一下
上一篇文章：
表单的一些基本用法与技巧
下一篇文章：
js下拉框里超过变成省略号
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
onpropertypchange
js常见表单应用技巧
关于文本限制字数的js代码
会自动逐行上升的文本框
如何使页面打开时input就被选中？
快速判断某个值是否在select中的方法
用JAVASCRIPT如何给<textarea&
基于prototype的validation.js发布2.3.4新
javascript实现上传图片前的预览（TX的面
textarea保留换行的注意事项
最 近 更 新
javascript写的一个表单动态输入提示的代
关于IFRAME 自适应高度的研究
js实现的的 文字自动''到google search框
javascript select列表内容按字母倒序排序
多线程的全选复选框
微调数字
显示、隐藏密码
js批量上传界面的实现
在一个form用一个SUBMIT(或button)分别提
实现复选框全选/全不选切换
热 点 排 行
checkbox实现全选的多种方法 不断
收藏的js表单验证控制代码大全
HTML里select的CSS样式的改变
改进版：在select中添加、修改、
二级连动菜单
Select的OnChange()事件
javascript判断单选框或复选框是
JS多级连动菜单
多个iframe自动调整大小的问题
把textarea中字符串里含有的回车
文章评论
共有 位脚本之家网友发表了评论我来说两句