嗨,大家好,我在使用CSS处理子菜单下拉菜单时遇到了麻烦。我正在尝试添加平滑的过渡外观,但是当我将鼠标悬停时,菜单甚至都没有显示。我确定这是我所缺少的小东西,但我似乎无法弄清楚问题出在哪里。这是代码:

#main-navigation ul.folder-child{
    opacity: 0;
    visibility: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

#main-navigation li:hover ul.folder-child{
    opacity: 1;
    visibility: visible;
    top: 50px;
}


我会很感激任何人都可以提供的帮助。提前致谢!

最佳答案

您仅为高度定义过渡,而没有为高度定义css规则。这是您的解决方案。

请注意:要转换height属性,您需要在正常和悬停状态下定义高度。

ul.folder-child {
    width: 180px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    position:absolute;
    top: 100%;
    left: 0;

    transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
#main-navigation li:hover > ul.folder-child {
    height: 100px;
    opacity: 1;
    visibility: visible;
}


查看http://jsfiddle.net/logiccanvas/vWDvy/480/

关于html - 使用CSS无法获得平滑的下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31399827/

10-12 00:14
查看更多