Menu with easing effect

Menu with easing effect

Hello,

i want to make a similar menu of the following tutorial : http://www.webstuffshare.com/2012/03/auto-moving-submenu-using-jquery/

My menu is here : www.intergayhiv.com

I would like that when your mouse is over, an image appears. Each button has its own image. However my menu shows always the same image (of the first button) at all buttons hover, it does not link the images to their submenus...

I use WordPress, i installed the html codes together with the two scripts in the header body :

  1. <div id="menu-wrapper">  
  2.             <ul class="menu"> 
  3.             <li id="page8"><a href="http://www.intergayhiv.com/" title="Home"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i1.png" height="80" width="80" alt="Home" /></a></li>
  4.             <li id="page11"><a href="http://www.intergayhiv.com/register/" title="Registration"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i17.png" height="60" width="60" alt="Registration" /></a></li>
  5.             <li id="page17"><a href="http://www.intergayhiv.com//infos-news/" title="Informations and News"><img src="http://www.intergayhiv.com//wp-content/themes/vihegay/menu/icons/i2.png" height="80" width="80" alt="Infos - News" /></a></li>           
  6.             <li id="page30"><a href="http://www.intergayhiv.com/members/" title="Members"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i3.png" height="80" width="80" alt="Members" /></a></li>
  7.             <li id="page45"><a href="http://www.intergayhiv.com/gallery/" title="Photo Gallery"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i4.png" height="80" width="80" alt="Photo Gallery" /></a></li>
  8.             <li id="page49"><a href="http://www.intergayhiv.com/activity/" title="Activity Wall"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i5.png" height="80" width="80" alt="Activity" /></a></li>
  9.             <li id="page52"><a href="http://www.intergayhiv.com/chat/" title="Chat"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i6.png" height="80" width="80" alt="Chat" /></a></li>
  10.             <li id="page55"><a href="http://www.intergayhiv.com/forum/" title="Forum and Ads"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i7.png" height="80" width="80" alt="Forum & Ads" /></a></li>
  11.             <li id="page5"><a href="http://www.intergayhiv.com/profile/" title="Profile"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i8.png" height="80" width="80" alt="Profile" /></a></li>
  12.             <li id="page60"><a href="http://www.intergayhiv.com/mailbox/" title="Messages"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i9.png" height="80" width="80" alt="Messages" /></a></li>
  13.             <li id="page63"><a href="http://www.intergayhiv.com/alerts/" title="Alerts"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i10.png" height="80" width="80" alt="Alerts" /></a></li>
  14.             <li id="page67"><a href="http://www.intergayhiv.com/profile-account/" title="Profile Account"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i11.png" height="80" width="80" alt="Profile Account" /></a></li>
  15.             <li id="page74"><a href="http://www.intergayhiv.com/directory/" title="Partners Directory"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i15.png" height="60" width="60" alt="Directory" /></a></li>
  16.             <li id="pagerss"><a href="http://www.intergayhiv.com/feed/" title="RSS - Subscribe to the rich site summary information and news" target="_blank"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i16.png" height="60" width="60" alt="RSS" /></a></li>
  17.             <li id="page70"><a href="http://www.intergayhiv.com/help/" title="User Help Page"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i12.png" height="80" width="80" alt="User Help Page" /></a></li>
  18.             <li id="page22"><a href="http://www.intergayhiv.com/terms/" title="Terms of Use and Conditions"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i14.png" height="60" width="60" alt="Terms of Use" /></a></li>
  19.             <li id="page14"><a href="http://www.intergayhiv.com/contact/" title="Contact"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/icons/i13.png" height="80" width="80" alt="Contact" /></a></li>
  20.             </ul>
  21.             </div>
  22.     <div id="submenu-wrapper">  
  23.             <ul class="submenu"> 
  24.             <li id="page8a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/1.jpg" alt="Home" /></li>
  25.             </ul>
  26.             <ul class="submenu">
  27.             <li id="page11a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/2.jpg" alt="Registration" /></li>
  28.             </ul>
  29.             <ul class="submenu">
  30.             <li id="page17a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/3.jpg" alt="Infos" /></li>
  31.             </ul>
  32.             <ul class="submenu">     
  33.             <li id="page30a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/4.jpg" alt="Members" /></li>
  34.             </ul>
  35.             <ul class="submenu">
  36.             <li id="page45a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/5.jpg" alt="Gallery" /></li>
  37.             </ul>
  38.             <ul class="submenu">
  39.             <li id="page49a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/6.jpg" alt="Activity" /></li>
  40.             </ul>
  41.             <ul class="submenu">
  42.             <li id="page52a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/7.jpg" alt="Chat" /></li>
  43.             </ul>
  44.             <ul class="submenu">
  45.             <li id="page55a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/8.jpg" alt="Forum" /></li>
  46.             </ul>
  47.             <ul class="submenu">
  48.             <li id="page5a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/9.jpg" alt="Profile" /></li>
  49.             </ul>
  50.             <ul class="submenu">
  51.             <li id="page60a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/10.jpg" alt="Mailbox" /></li>
  52.             </ul>
  53.             <ul class="submenu">
  54.             <li id="page63a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/11.jpg" alt="Alerts" /></li>
  55.             </ul>
  56.             <ul class="submenu">
  57.             <li id="page67a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/12.jpg" alt="Profile Account" /></li>
  58.             </ul>
  59.             <ul class="submenu">
  60.             <li id="page74a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/13.jpg" alt="Directory" /></li>
  61.             </ul>
  62.             <ul class="submenu">
  63.             <li id="pagerss-a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/14.jpg" alt="RSS" /></li>
  64.             </ul>
  65.             <ul class="submenu">
  66.             <li id="page70a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/15.jpg" alt="User Help" /></li>
  67.             </ul>
  68.             <ul class="submenu">
  69.             <li id="page22a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/16.jpg" alt="Terms" /></li>
  70.             </ul>
  71.             <ul class="submenu">
  72.             <li id="page14a"><img src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/17.jpg" alt="Contact" /></li>
  73.             </ul>
  74.             </div>
  75. <script>!window.jQuery && document.write(unescape(''))</script>
  76. <script type="text/javascript" src="http://www.intergayhiv.com/wp-content/themes/vihegay/menu/navig.js"></script>

You can find the jquery file here : http://www.intergayhiv.com/wp-content/themes/vihegay/menu/jquery-1.7.1.min.js

The other js file : http://www.intergayhiv.com/wp-content/themes/vihegay/menu/navig.js (i changed the "$" to "jQuery" in the codes as an important WP plugin uses already another jQuery file...)

It is important : my menu has already worked and i do not know what i have changed what caused the trouble ! But normally i am close to the success... (hope so)
Also please note i am "zero" in jquery, javascript language... so please speak gentle with me ! :)