Applying jQuery effects to a pure 2-levels CSS menu

Question

I'm working on a site with a simple 2-levels navigation menu. See the link below please.

http://tinyurl.com/d3wjtrc

What I need to do is to have some nice jQuery effects when the sub menu is displayed. Something like Fade In or any other cool effect.

I'm using pure css code to display the sub menu. Code below.

.menu{
    list-style:none; list-style-type:none;
    margin:25px 0 0 0;
}

.menu li{
    height:58px;
    background-repeat:no-repeat;
    position:relative;
}

.menu li a, .menu li a:visited {
    display:block;
    text-decoration:none;
    text-indent:-9999px;
    height:50px;
    background-repeat: no-repeat;
}

.menu li ul{
    display:none;
    height:157px;
    list-style:none; list-style-type:none;
    border-bottom:1px solid #777;
}

.menu li ul li{
    height:157px; float:left;
}

.menu li ul li img:hover{
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
}

.menu li ul li a, .menu li ul li a:visited{
    text-indent:0;
}

.menu li.menu_jack:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-132px;
}

.menu li.menu_family:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-270px;
}

.menu li.menu_cocktails:hover ul{
    width:697px;
    padding:0 0 0 327px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-420px;
}

.menu li.menu_partner:hover ul{
    width:924px;
    padding:0 0 0 100px;
    height:175px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-508px;
}

.menu li.menu_competitions:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-659px;
}

.menu li.menu_games:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-770px;
}

.menu li.menu_photos:hover ul{
    width:1024px;
    height:137px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-836px;
}

Your help is much appreciated. Thanks

Answer 1

As you've tagged jQuery I guess you're after a non CSS solution? If so then you can use something like the below to achieve a fade in effect.

$('#menuItem').hover(function(){
   $('.itemToFade').fadeIn();
},
function{
   $('.itemToFade').fadeOut();
});