mjworks. standard V1 레이아웃 스킨에 상단메뉴밑에 서브메뉴를 넣는 법

<!-- 상단메뉴 -->
- 중간생략 -
<!-- /상단메뉴 -->

<!-- 상단메뉴 -->
<!--1차메뉴-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->
            {@$gnb_count = 0;}
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->

                <li id="gnbli{$gnb_count}" <!--@if($val['selected'])-->class="on"<!--@end--> onmouseover="gnbinToggle({$gnb_count}, this)" ><a href="{$val['href']}" onfocus="this.blur()" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>{@$gnb_count++;}

            <!--@end--><!--@end-->
            <!-- main_menu 1차 끝 -->
  </ul>
  <!--//1차메뉴-->

  <script type="text/javascript">
   var gnb_count = {$gnb_count};
  </script>

  <!-- 2차 메뉴 -->
        {@$gnb_count = 0;}
        <!--@foreach($main_menu->list as $mkey => $mval)-->
    <!--@if($mval['text'])-->
          <!-- 왼쪽 2차 메뉴 -->
          <!--@if($mval['selected'])-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:block;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
  <script type="text/javascript">
   var gnb_count_now = {$gnb_count};
   reset_menu();
  </script>
          <!--@else-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:none;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
          <!--@end-->
          {@$gnb_count++;}
          <!--@end-->
        <!--@end-->

<!-- /상단메뉴 -->

#gnb { position:absolute; left:10px; top:85px; overflow:hidden; white-space:nowrap; }
#gnb li { float:left; list-style:none; position:relative; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:12px 0px 0px 0px; background:url(../images/default/bgGnbOff.gif) no-repeat center top; width:82px; height:20px; color:#ffffff; white-space:nowrap; text-align:center; font-size:1.2em; font-weight:bold; text-decoration:none; }
#gnb li a:hover, 
#gnb li a:focus { color:#66CC00; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#f60; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}

.gnb_sub { position:absolute; left:10px; top:125px; height:24px; overflow:hidden; white-space:nowrap;  }
.gnb_sub li { float:left; list-style:none; background:url(../images/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub li a { display:block; float:left; padding:6px 15px 0 15px; height:18px; color:#ffffcc; font-weight:bold; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
.gnb_sub li a:hover,
.gnb_sub li a:focus { color:yellow; }
.gnb_sub li.on a, .gnbin li.on a:hover { font-weight:bold; color:yellow; background:url(../images/arrow_3.gif) no-repeat center bottom; }

// 롤오버 2차메뉴 만들기
// Brower
var browserType=''; 

if(navigator.userAgent.indexOf("MSIE") >-1) {
   browserType = 'IE'; 
} else if(navigator.userAgent.indexOf("Firefox") >-1) {
   browserType = 'FF'; 
} else {
   browserType = 'OTHER'; 
}

function gnbinToggle(id, gnbblock) {
 if(browserType == 'FF') {
  gnbinToggleFF(id, gnbblock);
 } else {
  gnbinToggleIE(id, gnbblock);
 }
}

// Local Navigation Toggle
function gnbinToggleIE(id, gnbblock) {

 for(num=0; num<gnb_count; num++) {
  document.getElementById('gnb'+num).style.display='none';              // 2차 메뉴
  document.getElementById('gnbli'+num).setAttribute('className', 'off');  // 1차 메뉴
 }

 var sub_1 = document.getElementById('gnbli'+id);     // 1 차메뉴 
 var sub_2 = document.getElementById('gnb'+id);     // 2 차메뉴
 document.getElementById('gnb'+id).style.display = 'block';
 gnbblock.className = "on";

 var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;

 // 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';     
}

// Local Navigation Toggle
function gnbinToggleFF(id, gnbblock) {

 for(var num=0; num<gnb_count; num++) {
  document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
  document.getElementById('gnbli'+num).className = null;  // 1차 메뉴
 }

 var sub_1 = document.getElementById('gnbli'+id);     // 1 차메뉴 
 var sub_2 = document.getElementById('gnb'+id);     // 2 차메뉴
 document.getElementById('gnb'+id).style.display = '';
 gnbblock.className = "on";

 var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;

 // 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';     
}

function reset_menu()
{
   
     var sub_1 = document.getElementById('gnbli'+gnb_count_now);     // 1 차메뉴 
  var sub_2 = document.getElementById('gnb'+gnb_count_now);     // 2 차메뉴
  var sub_2_left =sub_1.offsetWidth * (gnb_count_now+0.5) - sub_2.offsetWidth /2;

 // 넓이가 0미만일경우 0
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';     
}