layout.html에

<ul class="menu">
   <!--@foreach($main_menu->list as $key => $val)-->
      <!--@if($val['text'])-->
         <!--@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['text']}</a>
         </li>

      <!--@end-->
   <!--@end-->
</ul>

를 넣고 css에

/* Generated via www.cssmenubuilder.com */

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

를 넣었습니다. (그림경로는 수정해서 넣었습니다.)

그림파일은 아래와 같구요.


그런데 막상 레이아웃을 적용하면 롤오버시 그림이 바뀌지가 않네요;
코드 자체에는 문제가 없는건가요?