点<a href 标签在a href文字连接下显示一个菜单

Question

定位问题而已
google一下：javascript 获取控件坐标

Answer 1

<title>文字下拉菜单</title>
<script language="javascript">
<!--
var tmpId
function Prompt(_this){
    if (tmpId==_this.id+"Span"){cloes(tmpId);return}
    if (tmpId && tmpId!=_this.id+"Span")cloes(tmpId)
    tmpId=_this.id+"Span"
    var obj=document.getElementById(tmpId)
    var p=getPosition(_this);
    obj.style.left=(p[0])+"px"
    obj.style.top=p[1]+20+"px"
    obj.style.display=""
document.onclick=function (ev) {
ev = ev || window.event;
   var tmp = ev.target || ev.srcElement;
    if (tmp!=_this)cloes(tmpId)     
}
}
function cloes(id){
document.getElementById(id).style.display='none';
tmpId=null;
document.onclick=null
}
function getPosition(theElement){
    var px =0;
    var py =0;
    while (theElement !=null){
        px +=theElement.offsetLeft;
        py +=theElement.offsetTop;
        theElement =theElement.offsetParent;
    }
    return [px,py];
}//-->
</script><div id=menu>
<a id=menu1 href="###"onclick=Prompt(this)>menu1<a> <a id=menu2 href="###"onclick=Prompt(this)>menu2<a>
<span id="menu1Span" style="display:none;position:absolute;border:1px #eee solid;padding:3px;background:#fff ">
<a href="#">menu-1<a><br>
<a href="#">menu-1<a><br>
<a href="#">menu-1<a>
</span>
<span id="menu2Span" style="display:none;position:absolute;border:1px #eee solid;padding:3px;background:#fff ">
<a href="#">menu-1<a><br>
<a href="#">menu-1<a><br>
<a href="#">menu-1<a>
</span>
</div>