현제 XE의 버전에서는 메뉴에서 롤오버 이미지를 지원하지않고 있습니다.
그래서 사실 상업적 사이트에서는 아무래도 실용적인 측면보다는 디자인적 측면이 부각되는 것이 사실입니다.
그래서 자바스크립트와 약간의 꼼수로 구현해 보았습니다.

먼저 xe_offical_site를 가지고 설명하도록 하겠습니다.

먼저 /layouts/xe_officail/js 폴더에 보시면 xe_offical.js 파일이 있습니다.
이파일에 다음 스크립트를 추가 합니다.

function on(obj){
 obj.src=obj.src.replace('_off.gif','_on.gif');
}

function off(obj){
 obj.src=obj.src.replace('_on.gif','_off.gif');
}

그리고 메뉴를 작성하실때 메뉴명을 사용할 이미지의 이름과 똑같이 만듭니다.
예를 들어 메뉴에서 main_menu1 로 메뉴항목을 추가 했으면 여기에 사용할 이미지를 2개 만듭니다.
평시에 사용할 이미지는 main_menu1_off.gif, 마우스 롤오버시 사용할 이미지는 main_menu1_on.gif 로 만듭니다.
이 파일들을 각각 color set별로 만드신다면 /layouts/xe_official/images/ 폴더 아래의 해당 color set폴더에 넣어 주시고

끝으로 /layouts/xe_official/폴더의 layout.html 파일을 수정해 주셔야 합니다.
중간쯤 보시면 <!--main_menu 1차 시작--> 이라는  부분이 보이고 그 밑에
 <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['text']}</a></li> 이 코드가 보이실 겁니다.
이것을

<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><img src="{$imgPath}{$val['text']}<!--@if($val['selected'])-->_on.gif"<!--@else-->_off.gif" onmouseover="on(this)" onmouseout="off(this)"<!--@end-->></a></li>

이렇게 고치시고

파일의 css 파일 임포트 하는 부분에 각각의 color set 아래에 각각의 color set의 css를 임포터 하는 부분에
위에서 만든 롤오버이미지들을 넣어둔 폴더를 {@ $imgPath = "/layouts/xe_official/images/white/"}  같이 각각의 color set의 임포터 부분의 아래에 추가하시면 됩니다.

<!-- 레이아웃과 연동될 css 파일 import -->
<!--@if($layout_info->colorset == "white")-->
    <!--%import("css/white.css")-->
{@ $imgPath = "/layouts/xe_official/images/white/"}  

설명하려고 보니 장황해진것 같은데 레이아웃 스킨 게시판에 제가 적용해서 만든 레이아웃 스킨을 올려 두었으니까 pdf파일의 설명서도 같이 올려 놓았습니다. 다운 받으셔서 확인 해보시면 쉽게 하실 수 있을 것 같습니다.

하시다가 문제생기면 댓글로 질문 남겨주시면 수시로 답할 수 있도록 하겠습니다.