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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS实现滚动触底的思路与代码(附PC端滚动分页加载数据)
Javascript实现当页面滚动到底部时触发加载事件,可以通过监听窗口的滚动事件,同时判断当前滚动条的位置和文档总高度来实现该功能,这篇文章主要给大家介绍了关于JS实现滚动触底的思路与代码,文中还附PC端滚动分页加载数据,需要的朋友可以参考下
2024-06-06
JavaScript中DOM常见的操作汇总
DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的标准，在JavaScript中，可以使用DOM API来对DOM进行操作，下面就来看看常见的操作都有哪些吧
2023-08-08
JavaScript实现左右下拉框动态增删示例
本篇文章主要介绍了JavaScript实现左右下拉框动态增删示例，可以对下拉框进行删除和增加，非常具有实用价值，需要的朋友可以参考下。
2017-03-03
JavaScript中常见的Polyfill示例详解
这篇文章主要介绍了JavaScript中常见Polyfill的相关资料,Polyfill是一种代码,用于在旧版浏览器中实现不支持的现代JavaScript功能,以确保跨浏览器兼容性和代码统一性,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-04-04
使用Javascript简单实现图片无缝滚动
本文简单介绍了使用原生javascript实现简单的图片无缝滚动的方法，并附上示例代码，推荐给大家，直接可以用在项目中的。
2014-12-12
PHP捕捉异常中断的方法
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。
2016-10-10
JavaScript中的new的使用方法与注意事项
JavaScript中的new的使用方法与注意事项...
2007-05-05
JavaScript中捕获与冒泡详解及实例
这篇文章主要介绍了JavaScript中捕获与阻止捕获、冒泡与阻止冒泡详解及实例的相关资料,需要的朋友可以参考下
2017-02-02
在你的网页中嵌入外部网页的方法
在你的网页中嵌入外部网页的方法...
2007-04-04
如何利用JS通过身份证号获取当事人的生日、年龄、性别
身份证可以识别一个人的信息，下面就介绍一下如何利用js通过身份证号码获取当事人的年龄和性别
2016-01-01

js 下拉菜单实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具