0

我正在使用一个简单的 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;
}

非常感谢您的帮助。谢谢

4

1 回答 1

0

当您标记 jQuery 时，我猜您是在使用非 CSS 解决方案？如果是这样，那么您可以使用类似下面的方法来实现淡入效果。

$('#menuItem').hover(function(){
   $('.itemToFade').fadeIn();
},
function{
   $('.itemToFade').fadeOut();
});
于 2013-03-23T13:30:53.497 回答