이 팁은 현재 우야노 배포판
http://www.zeroboard.com/16780024
http://www.uyano.com/bbs/9185
에 적용된 내용입니다. 샘플로 삼으시면 좋겠네요..
그리고 혹시 질문 내용이 있으시다면 먼저 http://www.uyano.com/bbs/web_xetips/9762 여기를 보신 후 해주세요..

일단 기본적인 수정 방법은 기존의 소마세월님의 팁과 거의 동일합니다.
단지 소스가 다를 뿐이죠..

이 팁의 단점은 메인의 1차메뉴 크기가 하나하나 동일해야 제대로 사용하실 수 있다는 겁니다.
유의하세요~~!!

수정파일은 기본 레이아웃 기준으로 layout.html, default.css, xe_official  3가지가 되겠습니다.

1) layout.html 수정하기
: 기존의 메인메뉴부분(1차메뉴나 2차메뉴)를 완전히 아래 소스로 덮어 씌움니다.

  <!--GNB-->

  <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>

  <!--//GNB-->

  <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-->

레이아웃의 메뉴 구성 방식에 따라 다르겠지만.. 이부분은 크게 수정할일은 없을겁니다.
기존(공식버전)의 1차메뉴에 롤오버를 위한 2차메뉴가 추가된 형태로 보시면 되겠습니다.

 

2) default.css 수정하기..
: css 내용중 메인메뉴 부분을 찾습니다. 주로 gnb로 시작하는 부분이 메인메뉴 css이죠..
이부분 역시 완전히 아래의 소스로 일단 바꿔 줍니다.
바꾸신 후에 수정을 추천 하지만.. 포지션 값은 기존 메인메뉴값을 먼저 입력한후 사용하시는게 좋을듯 합니다.
그래야 처음부터 대충이나마 모양새를 갖추어 볼 수 있을테니까요..

#gnb { position:absolute; left: 25px; top:60px; 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:#666666; white-space:nowrap; text-align:center; font-size:1.12em; font-weight:bold; text-decoration:none; }

#gnb li a:hover, 

#gnb li a:focus { color:#000000; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }

#gnb li.on a { font-weight:bold; color:#2f2f2f; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}

.gnb_sub { position:absolute; top:95px; left:30px; height:24px; overflow:hidden; white-space:nowrap;  }

.gnb_sub li { float:left; list-style:none; background:url(../images/default/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/default/arrow_3.gif) no-repeat center bottom; }

기존 1차메뉴 부분은 #gnb 부분이고.. 롤오버를 위해 추가된 부분이 .gnb로 시작되는 부분입니다.
우야노 닷컴 기준으로 되어 있으니 편하신데로 수정하시면 되겠습니다.




3) 이제 마지막 단계입니다. xe_official.js..
: 기본 레이아웃과 연동되는 자바스크립트 파일이죠..
이 부분은 기본 소스를 그냥 두고 아래 소스를 붙여넣으시면 되겠습니다.
그리고 아래 유의사항이 있으니 꼭 읽어 보시길 바랍니다.

// 롤오버 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';     

}

여기서 중요한 포인트가 있습니다.
700이라는 숫자가 여러번 나오는데 이 700이라는 숫자의 의미는 따라다닐 2차서브메뉴의 끝값입니다.
우야노닷컴을 예로 들면 전체 크기는 980px이지만..
검색창 부분이 250px정도 되기 때문에 검색창까지 2차메뉴가 이동하지 못하도록 크기값을 700으로 준겁니다.
예를 들어 검색창이 없으신분은 950정도로 값을 주시면 될듯합니다.
바꾸실때는 700이라는 숫자부분은 모두 바꾸셔야 합니다.

저처럼 이런 메뉴를 원하시는 분이면 그대로 쓰셔도 무방할테고..
능력이 되시면 자신의 홈페이지에 맞게 수정해서 사용하시면 되겠습니다.

특히나 이 팁이 고수님들에 의해서 조금 더 수정보완되기를 희망하며 올려놓습니다.
(질문 내용보다는 수정,보완된 팁들이 댓글을 장식했으면 좋겠습니다.!!)

출처 : http://www.zeroboard.com/16790587