CSS menu transition - li elements are excluded from the effect - html

Question

I'm concluding a design and I'm facing an issue which I'm not familiar with. I'm trying to make a menu expand from hidden to visible over 2 seconds on hover using a transition: height CSS element.
The issue is that the ul is obeying the transition and appearing visible within 2s, however the lis are completely ignoring the transition effect and instantly expanding on hover.
CSS syntax below:
#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;
}
}
Here is a fiddle: http://jsfiddle.net/x15jw967/

Answer 1

A few things help here. First, transition max-height instead of height to allow variation:
#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;
}
Then, set overflow to hidden so the outer content doesn't show:
#primary_menu ul li ul {
...
overflow: hidden;
}
Demo
Here's a simplified demo in which the close transition works also. You can add your styling back in and see what breaks it.