将jQuery特效应用到纯粹的2级CSS菜单

Question

我正在使用简单的2级导航菜单在网站上工作。请参阅下面的链接。

http://tinyurl.com/d3wjtrc

我需要做的是有一些不错的jQuery效果显示子菜单时。像淡入或其他任何酷炫的效果。

我使用纯CSS代码来显示子菜单。下面的代码。

.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; 
} 

非常感谢您的帮助。谢谢

Answer 1

正如你已经标记jQuery我猜你是在一个非CSS的解决方案？如果是这样，那么你可以使用类似下面的东西来实现淡入淡出效果。

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