Max height of ul is limited to a single nested li item - html

Question

Making a slide down drop menu animation, if I set max height to 100% the <ul> will only extend its height to the first nested <li>. I can set the max-height in the Keyframe to 400%, but this causes to animation to go twice as fast in other drop downs with less submenus. The height of the <ul> before I hover over seems to be the full size when debugging, not sure why it gets limited in the animation.
And as a secondary question, will I run into browser support issues using animations like this?
JSFiddle
#keyframes slideDown {
0% {
max-height: 0%;
opacity: .2;
}
100% {
max-height: 400%;
opacity: 1;
}
}
#menuTabs {
float: left;
position: absolute;
margin-left: 0px;
background: #256AAA none repeat scroll 0% 0%;
width: 100%;
overflow: visible;
}
#menuTabs ul {
left: 50%;
margin: 0px;
clear: left;
float: left;
padding: 0px;
font-size: 15px;
position: relative;
text-align: center;
font-family: helvetica;
list-style: outside none none;
}
#menuTabs ul li {
margin:0;
padding:0;
right:50%;
float:left;
display:block;
list-style:none;
min-width: 170px;
max-width: 170px;
position:relative;
}
#menuTabs ul li a {
color:#000;
display:block;
background:#ddd;
padding:0px 50px;
line-height:1.3em;
text-decoration:none;
font-family:'Oxygen', sans-serif;
color: #FFF;
margin-top: 0px;
font-weight: bold;
padding: 15px 50px;
text-decoration: none;
background: #Blue;
}
#menuTabs ul li:hover > a {
visibility: visible;
text-decoration: none;
background: #CCC;
}
ul#menu li.selected a {
color: #000;
background-color: #fff;
}
#menuTabs ul li ul {
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
overflow: hidden;
position: absolute;
left: 0%;
max-height: 0%;
}
#menuTabs ul li ul a {
z-index: 1;
display: block;
font-size: 12px;
max-width: 70px;
min-width: 120px;
min-height: 22px;
overflow: visible;
position: relative;
padding: 14px 25px;
background: #256AAA none repeat scroll 0% 0%;
}
#menuTabs ul li ul a:hover {
background: #CCC;
}
#menuTabs ul li:hover ul {
visibility: visible;
position: absolute;
background: #CCC;
}
#menuTabs ul li:hover ul {
max-height: 0%;
animation-name: slideDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#menuTabs ul li ul li {
left: 0%;
display: block;
}
<div id="menuTabs">
<ul id="menu">
<li> Services
<ul id="class">
<li id="srv1"> SubMenu
</li>
<li id="srv2"> SubMenu2
</li>
</ul>
<li>Resources
<ul>
<li> SubMenu2</li>
<li> SubMenu3</li>
<li> SubMenu4</li>
<li> SubMenu5</li>
</ul>
</li>
</li>
</ul>
</div>

Answer 1

I would do it by just using transition instead of keyframes for that, it runs smoother, and much easier. I haven't found a way to do the dynamic height thing, so I think you'll have to pick a height with the max number of items you're possibility going to have.
jsfiddle
#menuTabs ul li ul {
...
max-height: 0;
transition: all .1s ease-out;
opacity: .5;
}
#menuTabs ul li:hover ul {
...
max-height: 400%;
transition: all .25s ease-in;
opacity: 1;
}