xe를 배포할때 기본적으로 배포되는 레이아웃 중에 xe_official이라는 레이아웃이 있습니다.

이 레이아웃의 layout.html을 열어 보시면

21라인쯤의 메뉴 부분에

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

이런 구문이 있습니다.

여기에서 주의해서 보면 

class="active"|cond="$val1['selected']" 라는 부분이 메뉴가 해당 페이지에 와 있으면 active라는 클라스명을 넣는다는건데요. 2차메뉴에도 비슷한 부분이 있을겁니다.

그렇게 해당 페이지와 메뉴가 일치할때 클라스명을 넣고 그리고 그 클라스명 기준으로 css 값을 넣으시면 됩니다.