css로 메뉴제목을 클릭하면 하위리스트의 레이어창이 열릴때 위치문제

제목줄을 클릭하면 하위 목록이 펼쳐지도록 레이어 형태로 구현하려고 합니다.
예를 들면 아래 코드에서 처럼 <추천정보>를 클릭하면 제목글자 아래로
<추천정보 관련 하위 리스트>가 레이어로 열리도록 하고싶습니다.

그런데... 익스8 / 파이어폭스 어디에서도 레이어가 제목글 바로 아래에 열리지 않고
멀찍이 떨어져서 레이어가 펼쳐집니다.

익스플로러 8에는 openLayer(IdName, tpos, lpos)에서 위치값을 조정해서 맞추면 되지만
문제는 익스6, 익스8 그리고 파이어폭스에서 동일하게 출력이 안되는 문제가 있습니다.

코드를 가져와서 적용하다보니 크로스브라우징에서 문제가 많은데
코드를 전반적으로 수정해서라도 손을 봤으면 하는데 어떻게 해야할지 모르겠군요
한번 보시고 도움글좀 부탁드리겠습니다.




<style>
/* -- 탑링크 Start - */
#navi_box { width:100%; height:35px; text-align:center; padding:0;
background:#003399 url('/_common/img/navibox_bg.gif') repeat-x top left; }

#navi_box .navi_inbox { float:left; margin:10px 0px 0px 10px; padding:0; }
#navi_box .navi_sec { font:bold 11px dotum; color:#ccc; letter-spacing:-0.1em; }

a.navi_white:link, a.navi_white:active, a.navi_white:visited { font:bold 13px gulim,Tahoma; color:#fff; }
a.navi_white:hover { color:'#FFFF00'; text-decoration:underline; }

a.navi_yellow:link, a.navi_yellow:active, a.navi_yellow:visited { font:bold 13px gulim,Tahoma; color:#FFFF99; }
a.navi_yellow:hover { color:'#FFFF00'; text-decoration:underline; }

/* -- 레이어 메뉴 BOX - */
#layerBox { position:relative; }
#layerPop { width:150px; height:250px; padding:10px; position:absolute; display:none; border:5px solid #777; background:#fff; }
#layerPop .close { position:absolute; bottom:15px; right:10px; font:bold; color:red; }
</style>

<!-- 레이어 메뉴 SCRIPT -->
<script type="text/javascript">
<!--
function openLayer(IdName, tpos, lpos){
var pop = document.getElementById(IdName);
pop.style.display = "block";
pop.style.top = tpos + "px";
pop.style.left = lpos + "px";
}

function closeLayer(IdName){
var pop = document.getElementById(IdName);
pop.style.display = "none";
}
//-->
</script>


<div id="navi_box">
<div class="navi_inbox">

<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/tmb/index.php">온라인장터</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/busan/index.php">링크부산</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">구인구직</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">포인트샵</a>
<span class="navi_sec">ㆍ</span><a class='navi_yellow' href="#" onclick="openLayer('layerPop',0,0)">추천정보1</a>

</div>
</div>
<div style='both:clear; line-height:3px;'> </div>
<!-- 탑링크 End -->


<!-- 레이어 메뉴 1 -->
<div id="layerBox">
<div id="layerPop">
<strong>추천정보1 목록</strong>
<ul>
<li>목록내용</li>
</ul>
<a class="close" href="#" onclick="closeLayer('layerPop')">창닫기</a>
</div>
</div>