说明：代码取自网络，注释为笔者学习时添加！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>setTimeout应用</title> <style> body,div,ul,li,p{ margin:0; padding:0; } body{ font:12px/1.5 Arial;/*行高1.5x12=18px*/ } ul{ list-style-type:none;/*清除列表样式*/ } #nav, #nav ul, #nav ul li, #nav ul li a:hover, #nav .subnav, #nav .subnav p, #nav .subnav p span, #nav .subnav .arrow{ background:url(img/nav_bg.png) no-repeat; } #nav{ position:relative;/*相对*/ width:910px; background-position:0 -36px;/*向上位移36px*/ margin:10px auto;/*左右居中*/ } #nav ul{ height:36px; line-height:36px; margin-left:10px; padding-right:10px; overflow:hidden; background-position:right -72px;/*水平向右，上移72*/ } #nav ul li{ float:left;/*左浮动*/ width:110px; margin-left:-2px; background-position:0 -108PX;/*上移*/ } #nav ul li a{ font-size:14px;/*字号*/ color:#fff;/*白色*/ width:102px; display:block; text-align:center; text-decoration:none;/*文本装饰无*/ margin:0 2px 0 4px; } #nav ul li a:hover{ font-weight:700;/*粗*/ background-position:-3px -144px;/*右移，上移*/ } #nav .subnav{ display:none;/*默认隐藏*/ position:absolute;/*绝对定位*/ top:41px; width:auto !important; min-width:27px; line-height:27px; white-space:nowrap; background-position:0 -180px;/*上移*/ } #nav .subnav a{ margin-left:10px; padding-right:10px; background-position:right -234px;/*水平向右，上移*/ } #nav .arrow p span{ display:block;/*块显示*/ color:#235e99;/*蓝色*/ background-repeat:repeat-x;/*水平重复*/ background-position:0 -207px;/*上移*/ } #nav .subnav p a{ font-size:12px; display:inline;/*行内元素*/ color:#235e99;/*蓝色*/ text-decoration:none; margin:0 5px; padding:0 2px; } #nav .subnav p a:hover{ font-weight:400;/*字体粗细，相当于normal*/ background-image:none;/*背景图片无*/ border-bottom:2px solid; } #nav .subnav .arrow{ position:absolute; top:-4px; display:block; width:11px; height:5px; background-position:0 -261px;/*上移*/ } </style> <script> var get = { //定义全局对象，把要用到的函数封装在里面，很有意思.那些类库应该也是如此操作的吧 byId: function (id) {//获取id return document.getElementById(id); }, byClass: function (sClass, oParent) { var aClass = [];//定义空数组 var reClass = new RegExp("(^| )" + sClass + "( |$)");//声明一个正则对象,它可以匹配前/后有空格或无的字符串 var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);//只有测试成功才会加入数组 return aClass;//返回数组 }, byTagName: function (elem, obj) { return (obj || document).getElementsByTagName(elem); } }; window.onload = function () { var oNav = get.byId("nav");//获取div引用 var aLi = get.byTagName("li", oNav);//获取div中所有li的引用 var aSubNav = get.byClass("subnav", oNav);//获取子导航引用 var oSubNav = oEm = timer = null; var i = 0; for (i = 1; i < aLi.length; i++) { aLi[i].onmouseover = function () { for (i = 0; i < aSubNav.length; i++) aSubNav[i].style.display = "none";//隐藏所有子菜单 oSubNav = get.byClass("subnav", this)[0];//获取子菜单 oEm = get.byTagName("em", this)[0];//获取指示箭头 oSubNav.style.display = "block";//显示子菜单 //判断显示区域 oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ? //居左显示 oSubNav.style.left = this.offsetLeft + "px" : //居右显示 oSubNav.style.right = 0; //计算指针箭头显示位置 oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px"; clearTimeout(timer); oSubNav.onmouseover = function (event) { (event || window.event).cancelBubble = true; clearTimeOut(timer); } }; aLi[i].onmouseout = function () { timer = setTimeout(function () { oSubNav.style.display = "none"; }, 300); } } }; </script> </head> <body> <!--div容器，包裹所有内容--> <div id="nav"> <ul> <li><a href="javascript:;">站长之家</a></li> <li> <a href="javascript:;">行业资讯</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">业界动态</a> <a href="javascript:;">收购融资</a> <a href="javascript:;">门户动态</a> <a href="javascript:;">搜索引擎</a> <a href="javascript:;">网络游戏</a> <a href="javascript:;">电子商务</a> <a href="javascript:;">广告传媒</a> <a href="javascript:;">厂商开发</a> </span> </p> </div> </li> <li> <a href="javascript:;">站长在线</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">站长报道</a> <a href="javascript:;">好站推荐</a> <a href="javascript:;">站长聚会</a> <a href="javascript:;">站长言谈</a> <a href="javascript:;">站长茶馆</a> <a href="javascript:;">网站排行</a> </span> </p> </div> </li> <li> <a href="javascript:;">网站运营</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">建站经验</a> <a href="javascript:;">策划盈利</a> <a href="javascript:;">搜索优化</a> <a href="javascript:;">网站推广</a> <a href="javascript:;">免费资源</a> </span> </p> </div> </li> <li> <a href="javascript:;">设计在线</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">酷站推荐</a> <a href="javascript:;">网页设计</a> <a href="javascript:;">WEB标准</a> <a href="javascript:;">视频处理</a> <a href="javascript:;">设计活动</a> </span> </p> </div> </li> <li> <a href="javascript:;">网络编程</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">Asp编程</a> <a href="javascript:;">Php编程</a> <a href="javascript:;">.Net编程</a> <a href="javascript:;">Xml编程</a> <a href="javascript:;">Access</a> <a href="javascript:;">Mssql</a> <a href="javascript:;">Mysql</a> </span> </p> </div> </li> <li> <a href="javascript:;">联盟资讯</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">联盟动态</a> <a href="javascript:;">联盟介绍</a> <a href="javascript:;">联盟点评</a> <a href="javascript:;">网赚技巧</a> </span> </p> </div> </li> <li> <a href="javascript:;">服务器</a> <div class="subnav"> <em class="arrow"></em> <p> <span> <a href="javascript:;">Web服务器</a> <a href="javascript:;">Ftp服务器</a> <a href="javascript:;">Mail服务器</a> <a href="javascript:;">Dns服务器</a> <a href="javascript:;">Win服务器</a> <a href="javascript:;">Linux服务器</a> <a href="javascript:;">安全防护</a> <a href="javascript:;">虚拟主机</a> </span> </p> </div> </li> </ul> </div> </body> </html>