Помошь с кодом

Добрый день, занимаюсь сеййчас интересным проэктом, Вобщем вот мой тестовик http://gamesportal.forum2x2.ru/

Как вы видите обычное меню навигации с анимированными кнопками, но вот боковое не получается.

Вот фрагмент над которым я работаю overall_header:

Код:

<div class="for">
                                        <a href="/forum"><center>Форум</center></a>                                  
                                         </div>
                                      <div class="por">
                                     <a href="/portal"><center>Главаня</center></a>
                                      </div>
                                      <div class="You">
                                        <a href="http://gamesportal.forum2x2.ru/f12-forum"><center>You Tube</center></a>
                                           </div>
                                        
    </table>
<div id="blok_menu">
    <table id="menu" cellspacing="0" cellpadding="0" border="0" align="right">
                  <tr>
                      <td align="right"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>
                          </div>

Вот CSS  к нему:

Код:

.for{
border: 1px solid white;
 position: absolute;
width: 100px;
   height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
  margin-top: -35px;
  margin-right: 0;
  text-decoration: none !important;
font-style: italic;
font-weight: bold;
font-size: 13px;
   font-family:Georgia;


}

.por{

  border: 1px solid white;
 position: absolute;
 width: 100px;
  height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
   margin-top: -8px;
  margin-right: 0;
   text-decoration: none !important;
font-style: italic;
font-weight: bold;
font-size: 13px;
  font-family:Georgia;
 

}


.You{
  border: 1px solid white;
 position: absolute;
 width: 100px;
  height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
   margin-top: -66px;
  margin-right: 0;
  text-decoration:  center ;
font-style: italic;
font-weight: bold;
font-size: 13px;
   font-family:Georgia;
}

.mainmenu {
display:inline-block;
height:37px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:-37px;
}
a.mainmenu img:hover{
margin-top: 0px;
}



Повоторюсь, нужно что-бы боковое меню стало анимированным.

Принцип работы кнопки с анимированным фоном:
- у кнопки строго зафиксирована высота, например, 30px
- фон состоит из верхней и нижней части, причем каждая часть соответствует высоте кнопки (30px), поэтому одновременно может отображаться либо только верхняя часть фона, либо только нижняя

- в обычном состоянии видна только верхняя (или только нижняя) часть кнопки. При наведении курсора вступают в силу настройки СSS, которые смещают фон вверх (или вниз) на высоту, равную высоте кнопки (30px) — и происходит смена изображения!


А теперь посмотрите на фон своих кнопок:

Что в нем не соответствует вышеописанной схеме?