html - CSS 菜单过渡 - li 元素被排除在效果之外

Question

我正在完成一项设计，但遇到了一个我不熟悉的问题。我正在尝试使用 transition: height CSS 元素使菜单在悬停时在 2 秒内从隐藏扩展到可见。

问题是 ul 遵循过渡并在 2 秒内出现可见，但是 li 完全忽略过渡效果并在悬停时立即展开。

CSS 语法如下:

#main_navbar_container{
    margin-bottom:0;
    background:white;
}

.navbar-collapse {
  text-align:center;
}

#menu_container{
    width:80%;
    float:right;
    display:block;
}

#primary_menu{
    display:block;
    float:left;
    width:100%;
}

#primary_menu ul{
    list-style: none;
    margin: 0;
    padding-left: 0;
}

#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
    color:#ea474b;
    font-weight: 600;
    display: block;
    text-decoration: none;
    padding: 15px 20px;
    margin:auto;
}
#primary_menu a:hover{
    color:#F9690E;
}

#primary_menu li{
    float:left;
    position:relative;
    margin:0
}

#primary_menu ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid #dadada;
    background: #fff;
    color: #8c9398;
    float: right;
    position: absolute;
    top: 3.5em;
    right: -999em;
    z-index: 99999;
    text-align: center
}
#primary_menu ul li:hover > ul {
    right: 50%;
    margin-right: -100%;
    width: 200px;
 }
 .sub-menu li{
    margin:0 15px !important;
 }

 #primary_menu ul li ul a{
    color:#ea474b;
 }

#primary_menu ul li ul:hover a{
    color:#ea474b;
}
#primary_menu ul li ul li:hover a{
    color:#F9690E;
}

@media (max-width: 1200px){

        #main_navbar_container .container, #menu_container { width: 100%;}
        #menu_container .navbar-collapse { padding: 0;}
        #primary_menu{
            width:100%;
            margin:0;
        }

        #primary_menu li{
            width:100%;
            margin:5px 0 0 0;
        }
        #primary_menu ul li ul { 
            border-radius: 0 !important; 
            border-color: transparent !important; 
            display:hidden;
            height:100px;
            -webkit-transition: height 2s; /* Safari */
            transition: height 2s;
        }

        #primary_menu ul li:hover{
            background:none;
        }
        #primary_menu ul li:hover a{
            font-color:black;
            /*\color:rgb(207,0,15);*/
        }
        #primary_menu ul li:hover ul{
            position:initial;
            display:block;
            background-color:rgb(238,238,238);
            width:100%;
            padding:0;
            margin:0;
            height:400px;
        }
        #primary_menu ul li:hover li:first-of-type{
            border-top:1px solid rgb(238,238,238);
        }

        #primary_menu ul li:hover li:last-of-type{
            border-bottom:1px solid rgb(238,238,238);
        }

        #primary_menu ul li:hover a:link,
        #primary_menu ul li:hover a:visited{
            color:#ea474b;
        }

        #menu-home-screen-menu{
            margin-left:0;
        }
    }

这是一个 fiddle :http://jsfiddle.net/x15jw967/

Answer 1

这里有几件事有帮助。首先，转换 max-height 而不是 height 以允许变化:

#primary_menu ul li ul {
    ...
    max-height:0;
    -webkit-transition: max-height 2s;
    transition: max-height 2s;
}
#primary_menu ul li:hover ul {
    ...
    max-height: 400px;
}

然后，将溢出设置为隐藏，这样外部内容就不会显示:

#primary_menu ul li ul {
    ...
    overflow: hidden;
}

Demo

这是一个 simplified demo其中关闭过渡也有效。您可以重新添加您的样式，看看是什么破坏了它。