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

这是一把小提琴：http://jsfiddle.net/x15jw967/

Answer 1

这里有一些帮助。首先，转换最大高度而不是允许变化的高度：

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

演示

这里有一个简化的演示，其中关闭转换也可以工作。你可以重新添加你的样式，看看是什么破坏了它。