<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>弹出菜单</title> 
<script type="text/javascript"> 
function $(id) {
return document.getElementById(id);
}
window.onload=function () {
var list,menus=[];
list=getByClass('menu')[0];
var lis=list.childNodes;
var li,a,div,obj;
for (var i=0;i<lis.length;i++) {
if (lis[i].tagName=='LI') {
a=firstChild(lis[i]);
div=next(a);
obj={
btn:a,
item:div
};
menus.push(obj);
a.relatedItems=obj;      //这里的relatedItems是什么用法????
div.relatedItems=obj;
a.onmouseover=function (evt) {
this.relatedItems.item.style.display="block";
};
div.onmouseout=function () {
this.style.display="none";
};
a.onmouseout=function (evt) {
evt=evt||window.event;
if (evt.toElement==this.relatedItems.item){
return;
}
this.relatedItems.item.style.display="none";
};

}
}};
function firstChild(node) {//返回指定节点的第一个子元素
if (node.firstChild) {
if (node.firstChild.nodeType==1) return node.firstChild;
else {
var n=node.firstChild;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
 
function next(node) {//返回node的下一个兄弟元素
if (node.nextSibling) {
if (node.nextSibling.nodeType==1) return node.nextSibling;
else {
var n=node.nextSibling;
while(n=n.nextSibling) {
if (n.nodeType==1) return n;
}
return null;
}
}
return null;
}
 
function lastChild() {
}
 
function getByClass(className,context) {
context=context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes=context.getElementsByTagName('*'),
ret=[];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
 
function hasClass(node,className) {
var names=node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}
function fixEvent(evt) {
if (!evt.target) {
evt.target = evt.srcElement;
evt.preventDefault = fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.fromElement;
} else if (evt.type =="mouseout") {
evt.relatedTarget = evt.toElement;
}
evt.charCode =  (evt.type=="keypress")?evt.keyCode:0;
evt.eventPhase = 2;//IE仅工作在冒泡阶段
evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间
}
return evt;
}
fixEvent.preventDefault =function () {
this.returnValue = false;//这里的this指向了某个事件对象,而不是fixEvent
};
fixEvent.stopPropagation =function () {
this.cancelBubble = true;
};
</script> 
<style type="text/css"> 
ul.menu {
width:300px;
height:30px;
}
ul.menu li {
display:block;
width:80px;
float:left;
height:20px;
border:2px ridge aqua;
margin:2px;
text-align:center;
}
ul.menu li a {
display:block;
width:80px;
height:20px;
background:yellow;
}
ul.menu li div {
display:none;
width:180px;
height:60px;
background:pink;
}
</style> 
</head> 
<body class="redStyle"> 
<ul class="menu"> <!--Comment--> 
<li> 
<a href="###">按钮A</a> 
<div>内容A</div> 
</li> 
<li> 
<a href="###">按钮B</a> 
<div>内容B</div> 
</li> 
<li> 
<a href="###">按钮C</a> 
<div>内容C</div> 
</li> 
</ul>  
</body> 
</html>