방법은 2가지가 있습니다.

1. css로 가상 클레스를 이용하여 위치를 변경하는 방법이 있습니다.

"게시판"이라는 메뉴명이 7번째라고 했을 경우

#pm__35807_ > ul > li:nth-child(6){right:0 !important;}

를 적용해주시면 됩니다.

!important - !important를 선언한 후 해당 스타일은 스크립트나 더높은 점수의 css를 무시합니다.

 

2. 현재 적용되어 있는 소스입니다. 아래처럼 스크립트로 적용하는 부분이 있습니다.

$(function(){
   var on_idx=$("pm__35807_ > ul.dep1 > li.on").index();
   setting_right($("#pm__35807_ > ul.dep1 > li.on"));

    $("body").on({
        mouseenter : function(){
          console.log($(this))
          setting_right($(this));
        },
        mouseleave : function(){
            $(this).children('div').removeAttr('style');
          setting_right($("#pm__35807_ > ul.dep1 > li").eq(on_idx));
        }
    }, "#pm__35807_ > ul.dep1 > li")

     function setting_right(target){
        var    dep1right = target.closest(".dep1").offset().left + target.closest(".dep1").outerWidth(),
            dep2right = target.offset().left + target.children("div").outerWidth();
        if(dep2right > dep1right){
            target.children('div').css('right','0');
        }
      }
})

위의 스크립트는 처음 랜더링 했을때 class="on"을 가진 메뉴를 체크하여 css{right:0}을 적용하는 소스입니다.

그리고 마우스 오버를 했을 경우 해당 메뉴를 체크하여 css{right:0}을 적용합니다.

현재 관련없는 스크립트가 많이 있습니다. 동작에는 문제없게 진행을 하였지만 다른 스크립트가 삭제될 경우 오류가 발생할 수도 있습니다.