首页 > 网络编程 > JavaScript > 表单特效 > 下拉菜单 2006-07-19 00:00:00 作者： 下拉菜单 <!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 全选 注:如需引入外部Js需刷新才能执行]
