간단한 드롭매뉴 소스를 받아서 수정하여 쓰고있는데요

/*html*/
<div id="navi">
  <ul>
    <li>
      <a href="#" class="menu" id="navi1" onmouseover="mopen(1);" onmouseout="mclosetime();">이동주막</a>
      <div class="subnavi" id="sub_menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
        <a href="#">서브1_1</a>
        <a href="#">서브1_2</a>
      </div>
    </li>
    <li>
      <a href="#" class="menu" id="navi2" onmouseover="mopen(2);" onmouseout="mclosetime();">메뉴소개</a>
      <div class="subnavi" id="sub_menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
        <a href="#">서브2_1</a>
        <a href="#">서브2_2</a>                     
      </div>
    </li>
...

/*css*/
#navi{position:absolute; width:600px; top:50px; left:250px; margin: 0; padding: 0}
#navi li{width:120px; float:left; margin: 0; padding: 0; list-style: none; font: bold 16px 굴림;}
#navi li a.menu{display: block; text-align: center; padding: 4px 10px; margin: 0 1px 0 0; width: 120px;  text-decoration: none}

#sub_menu1{top:23px; left:20px;}
#sub_menu2{top:23px; left:140px;}
#sub_menu3{top:23px; left:260px;}
#sub_menu4{top:23px; left:380px;}
#sub_menu5{top:23px; left:500px;}

.subnavi{width:100px; visibility: hidden; position: absolute; z-index: 3 }
.subnavi a {display: block; font: 12px 굴림; text-align: conter; width:100px; text-decoration: none; padding: 5px; border-bottom: 3px solid #999}
.subnavi a:hover {width:100px; border-bottom: 3px solid #f00}

/*js*/
var TimeOut        = 300;
    var currentLayer    = null;
    var currentitem    = null;
    var currentLayerNum = 0;
    var noClose        = 0;
    var closeTimer      = null;

    function mopen(n) {
        var l  = document.getElementById("sub_menu"+n);
        var mm = document.getElementById("navi"+n); 
        if(l) {
            mcancelclosetime();
            l.style.visibility='visible';
            if(currentLayer && (currentLayerNum != n))
                currentLayer.style.visibility='hidden';
            currentLayer = l;
            currentitem = mm;
            currentLayerNum = n;           
        }  else if(currentLayer) {
            currentLayer.style.visibility='hidden';
            currentLayerNum = 0;
            currentitem = null;
            currentLayer = null;
        }
    }
    function mclosetime() {
        closeTimer = window.setTimeout(mclose, TimeOut);
    }
    function mcancelclosetime() {
        if(closeTimer) {
            window.clearTimeout(closeTimer);
            closeTimer = null;
        }
    }
    function mclose() {
        if(currentLayer && noClose!=1) {
            currentLayer.style.visibility='hidden';
            currentLayerNum = 0;
            currentLayer = null;
            currentitem = null;
        } else {
            noClose = 0;
        }
        currentLayer = null;
        currentitem = null;
    }
    document.onclick = mclose;


이렇게 되어있습니다. 그런데 2차메뉴도 가로로 붙이고 싶은데 생각처럼 잘 안되네요.
고수님들의 힌트좀 부탁드립니다.

수정중인 사이트 : http://angstblute.cafe24.com/index.php 입니다.