[jQuery] Help creating a special menu

[ivanisevic82]

Hi!
Sorry for my english!
I need help to create a special menu with jquery.
In this menu, when I will be hover a "button", it remain the same, but
all the other changes!

You can see a very basics and work in progress example in the orange
menu here: www.ivanisevic82.com


I used this tutorial:

http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/

So, I created this menu with this code:

PHP:

<ul>
        <li><a href="http://xxx.com"; accesskey="3" id="home"
title="Home">Home</a></li>
        <li><a href="http://yyy.com"; accesskey="4" id="why" title="why">Why</
a></li>
        <li><a href="http://ppp.com"; accesskey="5" id="try" " title="try">Web
Design</a></li>
</ul>

CSS:

#main_nav {
list-style: none;
margin: 0;
padding: 0;
}

#main_nav li {
float: left;
list-style: none;
}

#main_nav li a {
text-indent: -999999px;
overflow: hidden;
display: block;
height: 80px;
}

#home{ background: url(/media/1.jpg); width: 103px; }
#why { background: url(/media/2.jpg); width: 103px; }
#try { background: url(/media/3.jpg); width: 103px; }

#main_nav:hover li a#home { background-position: -206px; }
#main_nav:hover li a#why { background-position: -206px; }
#main_nav:hover li a#try { background-position: -206px; }

#home:hover { background: url(/media/1.jpg) 0 0 !important; }
#why:hover { background: url(/media/2.jpg) 0 0 !important; }
#try:hover { background: url(/media/3.jpg) 0 0 !important; }





Now what I'd like to do, is try to apply a fad-in / fade-out effect
(with jquery) everytime a part of the menu has to change aspect.

I tried to build this js ofr jquery, but it doesn't works:

$(function(){
$("#home").hover(
    function(){$("#main_nav:hover li a#webdesign").fadeIn('slow');},
    function(){$("#main_nav:hover li a#about").fadeIn('slow');});
});


Can you help me to build a js working for my project?

Thank you, bye!