일단 마지막 li의 클라스명을 뽑아야겠지요.

xe_official 레이아웃 기준으로 보면

<div class="gnb">

<ul>

<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>

<ul cond="$val1['list']">

<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>

</ul>

</li>

</ul>

</div>

이런 형태를 보이는데요. 여기에 첫번째 li를 구분하기 위해 한번 수정을 가합니다.

<div class="gnb">

<ul>

<li loop="$main_menu->list=>$key1,$val1" class="active first_li"|cond="$val1['selected']" 

class="first_li"|cond="!$val1['selected']"

><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>

<ul cond="$val1['list']">

<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>

</ul>

</li>

</ul>

</div>

빨간 부분이 첫번째 li에 first_li 라는 클라스명을 넣기 위한 추가 부분인데요. 이러면 첫번째 li는 항상 first_li라는 클라스명을 가지게 됩니다.

그럼 여기서 첫번째 li의 마지막 li에 last_li라는 클라스명을 넣기 위한 js를 추가하면 되는데요.

js 쪽에

$('li.first_li').last().addClass('last_li'); 를 추가하시면 첫번째 li의 마지막 li에(first_li 중에 가장 끝에오는) last_li 라는 클라스명이 추가가 됩니다.

그럼 마지막 li에 margin-right:0만 해 주면 되겠네요.

css에서

.last_li{margin-right:0 !important;} 를 추가 해 주시면 됩니다.

!important; 이 부분은 꼭 추가해야 할 부분은 아니지만 margin-right:30px;를 어떤 기준으로 줬는지 알 수 없어서 추가했고요.

!important;는 꼭 이렇게 하라는 말입니다.

css에서

li:last-child{margin:0px}  

참고로 위방식은 ie7,ie8에서 적용이 되지않음.

js에서는

$('li:last-child').css('margin','0px');

위방식은 ie7, ie8 적용됨.