obj指一个html控件
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
event指事件源,这里指鼠标
event.clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
event.offsetX：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 scrollWidth 获取对象的滚动宽度。
scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
例子比较粗糙，用着改改就ok了．
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.title_top {
BORDER-RIGHT: #b9c3d4 1px solid; BORDER-TOP: #b9c3d4 1px solid; MARGIN-TOP: 0px; PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(/img06/title_top_bg.gif); PADDING-BOTTOM: 2px; BORDER-LEFT: #b9c3d4 1px solid; WIDTH: 778px; PADDING-TOP: 3px; BORDER-BOTTOM: #b9c3d4 1px solid; BACKGROUND-REPEAT: repeat-x; TEXT-ALIGN: left
}
.header {
BORDER-RIGHT: #b9c3d4 1px solid; BORDER-TOP: #b9c3d4 1px solid; MARGIN-TOP: 10px; BACKGROUND-IMAGE: url(/img06/title_top_bg.gif); BORDER-LEFT: #b9c3d4 1px solid; WIDTH: 778px; LINE-HEIGHT: 160%; BORDER-BOTTOM: #b9c3d4 1px solid; BACKGROUND-REPEAT: repeat-x; HEIGHT: 61px; TEXT-ALIGN: left
}
.my_header{
margin-right: auto; margin-left: auto;width:800px;height:150px;
}
.logo{
width:150px;
height:130px;
margin:10px;
background-color: #999999;
text-align:center;
float:left;
}
.title{
width:600px;
height:130px;
margin:10px;
background-color: #FFFFFF;
float:right;
}
.menu{
width:90%;
margin-right:auto;
margin-left:auto;
height:30px;
}
.menu_sub{
POSITION: absolute;
width:50px;
height:100px;
background-color:#24356E;
}
.title_des{
width:90%;
margin-right:auto;
margin-left:auto;
height:30px;
}
-->
</style>
<script>
function dis_sub(eP){
document.getElementById('subMenu').style.display="";
document.getElementById('subMenu').style.zIndex=99;
var s,cur_d
var eT = eP.offsetTop;
var eH = eP.offsetHeight+eT;
var dH = document.getElementById('subMenu').style.pixelHeight;
var sT = document.body.scrollTop;
var sL = document.body.scrollLeft;
event.cancelBubble=true;
document.getElementById('subMenu').style.posLeft = event.clientX-event.offsetX+sL-5;
document.getElementById('subMenu').style.posTop = event.clientY-event.offsetY+eH+sT-5;
}
function hid_sub(eP){
eP.style.display="none";
}
</script>
</head>
<body>
<div id = "subMenu" class="menu_sub" style="display:none;" onMouseOut="hid_sub(this)">子菜单一</div>
<div class="my_header">
<div class="logo">logo</div>
<div class="title">
<div class="menu"><span onMouseOver="dis_sub(this)" style="background-color:blue">菜单一</span> 菜单二 菜单三 菜单四 菜单五 </div>
<div class="title_des">网站描述</div>
</div>
</div>
</body>
</html>