简单的DIV菜单，点击菜单外部隐藏菜单，多浏览器兼容测试通过
<!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>
<script src="js/jquery-1.4.1.min.js"></script>
<script>
var PopupPanel = function(panelID) {
this.IsOut = true;
this.PanelID = panelID;
$("#" + this.PanelID).click(function() {
document.all ? window.event.cancelBubble = true : event.stopPropagation();
});
this.BodyClick = function() {
this.IsOut ? $("#" + this.PanelID).hide() : $("#" + this.PanelID).show();
}
this.Open = function() {
$("#" + this.PanelID).hide();
};
this.Over = function() {
this.IsOut = false;
};
this.Out = function() {
this.IsOut = true;
};
};
var HeaderPP = new PopupPanel("test");
$(document).click(function() {
HeaderPP.BodyClick();
});
</script>
</head>
<body>
<a href="javascript:void(0);" onmouseout="HeaderPP.Out()" onmouseover="HeaderPP.Over()"
onclick="HeaderPP.Open();">打开菜单</a>
<br />
<a href="javascript:alert('点击了菜单外面的链接');">菜单外面的连接</a>
<div id="test" style="background-color: Gray; height: 200px; width: 100px;">
<a href="javascript:void(0);" onclick="alert('点击了菜单1');">菜单1</a>
<br />
<a href="http://baidu.com" target="_blank">菜单2</a>
</div>
</body>
</html>
