js 下拉菜单实现代码

更新时间：2010年05月22日 21:52:07 作者：

js 下拉菜单实现代码，原理比较简单，需要的朋友可以参考下，具体的美化要靠自己。

<!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> <meta name="description" content=" "> <meta name="keywords" content=" "> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> *{padding:0;margin:0;} .nav{width:850px;margin:50px auto;position:relative;} .nav li{display:inline;margin-right:50px;} .nav ol{background-color:#f5f5f5;border:1px solid #ccc;display:none;padding:15px;} .nav ol li{display:block;margin-bottom:15px;} </style> <script type="text/javascript"> var next=function (el) { do { el = el.nextSibling; } while ( el && el.nodeType != 1 ); return el; } var showContent=function (el) { var _next=next(el); _next.style.display="block"; _next.style.position="absolute"; _next.style.zIndex="999"; _next.style.top=el.offsetHeight+el.offsetTop+"px"; _next.style.left=el.offsetLeft+"px"; _next.onmouseout=function (){ this.style.display="none"; } _next.onmouseover=_next.onmousemove=function (){ this.style.display="block"; } } var hideContent=function (el) { el.style.display="none"; } </script> </head> <body>  <div class="nav"> <ul> <li> <a href="###" onmouseover="showContent(this);" onmouseout="hideContent(next(this));" >首页</a> <ol> <li><a href="###">首页1</a></li> <li><a href="###">首页2</a></li> <li><a href="###">首页3</a></li> <li><a href="###">首页4</a></li> <li><a href="###">首页4</a></li> </ol> </li> <li> <a href="###" onmouseover="showContent(this);" onmouseout="hideContent(next(this));" >电影</a> <ol> <li><a href="###">电影1</a></li> <li><a href="###">电影2</a></li> <li><a href="###">电影3</a></li> <li><a href="###">电影4</a></li> <li><a href="###">电影4</a></li> </ol> </li> <li><a href="###">新闻</a></li> <li><a href="###">新片</a></li> <li><a href="###">排行榜</a></li> </ul> </div> dcxsssssssss  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

input 宽度自适应
感谢网友“liufabin”提出的关于不支持FF的问题，第一个在FF下经过测试时支持的，第二个中的高度自适应不支持，我在网上找了一个JQUERY的插件
2009-05-05
JavaScript实现表单验证功能
这篇文章主要为大家详细介绍了JavaScript实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下
2016-04-04
高性能JavaScript模板引擎实现原理详解
这篇文章主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25、32 倍,需要的朋友可以参考下
2015-02-02
JavaScript的懒加载处理的方式
懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧
2023-10-10
利用HTML5的画布Canvas实现刮刮卡效果
大家都玩过刮刮乐吧，都想一夜暴富，本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果，需要的朋友可以参考下
2015-09-09
H5唤醒APP实现方法及注意点总结
目前通过H5页面唤起App的场景十分常见,比如常见的分享功能,这篇文章主要给大家介绍了关于H5唤醒APP实现方法及注意点的相关资料,需要的朋友可以参考下
2021-06-06
微信小程序实现批量倒计时功能
这篇文章主要为大家详细介绍了微信小程序实现批量倒计时功能，适用于商品列表倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
js动态实现表格添加和删除操作
这篇文章主要为大家详细介绍了js动态实现表格添加和删除操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
JS实现OCX控件的事件响应示例
JS支持OCX控件的事件（event），当OCX控件定义的事件发生时，JS可以捕获该事件并对事件进行相应的处理
2014-09-09