我已经尝试了很长时间，但无法获得下拉菜单幻灯片效果

Question

我做了这个下拉菜单，想在上面添加一些漂亮的幻灯片效果。 由于我是编程新手，因此无法正常工作，而且我已经在Google上搜索了几个小时。 我准备了一个jsfiddle [Here] [1] （因为那是我应该做的，对吧？） 。 如果能得到一点帮助，我将非常感激。

谢谢！

[1]： http ： //jsfiddle.net/knickemackan/2r6FE/

Answer 1

我更新了JS小提琴

您需要添加jquery文件，并向JS文件中添加一些代码，如下所示。

$("#navMainWrap li, #navMainWrap li a").hover(function () {
    $(this).find("ul").slideDown("slow");
}, function() {
    $(this).find("ul").slideUp("slow");
});

关于D。

Answer 2

要获得类似幻灯片效果的效果，可以使用max-height属性：

#nav ul li:hover ul {
    max-height: 500px;
}
#nav ul ul {
    display:inline-block;
    max-height: 0;
    position: absolute;
    overflow:hidden;
    background-color: #FFFFFF;
    border: 5px solid #ddd;
    border-top: 0;
    margin-left: -5px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

这样，子菜单将在您将其菜单点悬停时扩展，直至达到其原始大小或最大高度值。

您也可以使用left属性代替max-height来创建水平滑动效果。

Answer 3

如果您执行“ display：block;”; 元素的高度不会自动设置动画。

（ http://jsfiddle.net/2r6FE/11/ ）像这样更新CSS：

#body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    background-color: #FFF;
}

#header_wrapper {
    width: 100%;
    height: 150px;
    margin: 0 auto;
    background-color: #FFF;
}

#logo_wrapper {
    height: 150px;
    margin-left: 10%;
    width: 500px;
    background-image: url(../img/logo.png);

}

#nav {
    background-color: #FFF;
    border: 1px solid #ccc;
}
#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    z-index: 998;
    position: relative;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
z-index: 999;

}
#nav ul li {
    display: inline-block;
    z-index: 1000;
    position: relative;
}
#nav ul li:hover {
    background-color: #BFF2FF;
}
#nav ul li a, visited {
    color: #999;
    display: block;
    padding: 15px;
    text-decoration: none;

}
#nav ul li ul {
    max-height:0;
    -webkit-transition-property: max-height,opacity;
    -moz-transition-property: max-height,opacity;
    -ms-transition-property: max-height,opacity;
    -o-transition-property: max-height,opacity;
    transition-property: max-height,opacity;
    -webkit-transition-duration: 0.3s,0,3s;
    -moz-transition-duration: 0.3s,0,3s;
    -ms-transition-duration: 0.3s,0,3s;
    -o-transition-duration: 0.3s,0,3s;
    transition-duration: 0.3s,0,3s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -ms-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    overflow:hidden;
}
#nav ul li:hover ul {
    max-height:600px;
}
#nav ul ul {
    display: block;
    position: absolute;
    background-color: #FFFFFF;
    border: 5px solid #ddd;
    border-top: 0;
    margin-left: -5px;

}


#nav ul ul li {
    display:block;
}
#nav ul ul li a:hover {
    color: #FFF;
}

#uploadcont {
    background-color: fff;
    height: 200px;
    width: 500px;

}
#contactcont {
    background-color: #ffffff;
    width: 500px;
}

.alleft {
    text-align: left;
}

#uploadcont_in {
    height: auto;
    margin: 25px;
    padding: 10px;
    border: 10px solid #FFF;
}
#contactcont_in {
    height: auto;
    margin: 25px;
    padding: 10px;
}