마우스오버(롤오버), 서브 메뉴 출력

요즘은  GNB 영역에 마우스를 올리면 서브메뉴가 출력되는 소스를 연구(?)중입니다...^^;;

 onmouseover= , onmouseout= 코드를 주면 오버했을때와 아웃했을때의 이미지가 바뀌죠.
하지만 제가 하려는건 마우스오버했을때,  서브메뉴가 출력되는 겁니다.

이것 역시 간단하죠..
onmouseover= 코드에 레이어를 주고 해당 레이어에 서브메뉴를 출력해주면 됩니다.

그렇다면 무엇이 문제인지.......를 상세하게 써보도록 하겠습니다.
현재 구현중인 사이트는 html로 모두 코딩된 것이 아닌, 어드민 상에서 메뉴를 추가하면 새로운 카테고리가 규칙에 맞게 생성되는 형식입니다.

즉,
메뉴1  메뉴2  메뉴3  으로 GNB가 구성되어되어있다고 가정할때...
4번째 메뉴를 추가하려면 다시 코딩을 해야하는 것이 아닌, 어드민 상에서 메뉴4를 추가해주면 규칙에 맞게 사이트에서 메뉴4가 뿌려지는 형식이죠.  

그렇기 때문에 소스를 보면 아래와 같습니다.

  <!--GNB-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->
                <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
                <!--@end-->
           
  
  

서브메뉴를 출력해주기 위해 좀 변화를 줬는데요...

     
 

 
             
            {@$gnb_count = 0;}  
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> 
                <!--@if($val['selected'])--> 
                    {@ $menu_1st = $val }  
                <!--@end--> 
               
• !--@if($val['selected'])-->class="on" onmouseover="gnbinToggle({$gnb_count}, this)" >!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>{@$gnb_count++;}  
         <!--@end--> 
               
   

 
   
   
   
        {@$gnb_count = 0;}  
        <!--@foreach($main_menu->list as $mkey => $mval)--> 
    <!--@if($mval['text'])--> 
           
          <!--@if($mval['selected'])--> 
           

 
     <!--@if(!$mval['list'])-->
 
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])--> 
    
2. !--@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--> 
        

 
   
          <!--@else--> 
           

 
     <!--@if(!$mval['list'])-->
 
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])--> 
    
2. !--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a> 
        </li> 
                 <!--@end--> 
        

 
          <!--@end--> 
          {@$gnb_count++;}  
          <!--@end--> 
        <!--@end--> 

거의 똑같은데...조금 차이가 있다면...
{@$gnb_count = 0;}   를 이용하여 카운트를 해줍니다.

그리고
   
이부분을 이용해서 1차 메뉴의 갯수를 지정해주는거죠.

그리고 위의 처음보여드린 소스로는 2차메뉴를 만들기 어렵기 때문에  1차메뉴 출력부분을 빼고 다시 2차메뉴를 출력하는거죠.
메뉴별로 2차메뉴를 뽑아내는 겁니다.

그리고 새로 추가된 부분을 css로 정리해주고..

각 위치 부분 및 설정부분을 js파일로 저장후 위의 소스에서 불러올 수 있도록 해줍니다.

여기서 문제가 발생하는데...
GNB에 마우스 오버시 이벤트가 발생하여 GNB_SUB가 출력되고 옆 메뉴로 이동시 옆 메뉴의 서브가 출력되지만 마우스가 다른 곳으로 빠져나갔을 때에는 그대로 GNB_SUB가 남아있더라구요..

이것을 해결하기 위해 GNB영역에 onmouseOut 속성을 줬더니 GNB_SUB로 마우스를 옮기려고 하면 서브메뉴가 사라지는 현상이 생겼습니다.
그래서 GNB영역에는 onmouseOver 속성만 주고 GNB_SUB에 아웃 속성을 주어서 문제를 해결했습니다.

현재는 여기까지 적용되었습니다.

하지만 아직도 해결하지 못한 문제가 있는데요...

GNB와 GNB 서브메뉴가 하나의 레이어가 아니기때문에...
GNB에서 마우스가 GNB_SUB로 넘어가면 GNB의 마우스 오버시 설정된 색상이 풀린다는거죠..

아래 그림을 이용해서 설명드리자면...
서브메뉴로 마우스가 이동했을때 [그림2]와 같이 유지가 되어야하는데
[그림1] 처럼 된다는거죠...

    

                   [그림1]                                     [그림2]

이 부분을 어떻게 해결해야할지....

도와주세요!!!