首页 > 网络编程 > JavaScript > javascript技巧 > js 下拉菜单 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代码js模拟select下拉菜单控件的代码js 控制下拉菜单刷新的方法Js点击弹出下拉菜单效果实例
