Keyframe animation for max-height running but not working

Question

I've got an example CSS menu set up but I can't seem to get the animation working.

Take a look at this jsfiddle

Only the second button PORTFOLIO has a sub-menu. I know i'm getting close because when the button has :hover set and you take a look at what CSS selectors are active, you can see that this selector:

#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu {
    /* iE doesn't play nice with shorthand play-state, but it's initially running so it's redundant */
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;

    -webkit-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Chrome 4.3 | Edge | Safari 4.0 - 8.0 */
    -moz-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Firefox 5.0 | Gecko 16.0 */
    -o-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Opera 12 */
    animation: slideDown 500ms linear 0s 1 normal forwards; /* Modern browsers */
}

is active.

The keyframe is:

@keyframes slideDown{
    from {
        max-height: 0;
    }
    to {
        max-height: 500px;
    }
}

When the button is hovered I set the wrapper nav_sub_menu_wrapper to max-height:500px. The problem is that the content nav_sub_menu is instantly visible even though the animation dictates a 500ms frame from max-height: 0 to max-height: 500px

Transitions are not an option because I'm trying to get this to work with IE9 as well.

Thanks in advance for your time!

UPDATE

The problem has been resolved thanks to the people in the comment section. I've successfully used my own js framework before to load an external CSS file with only keyframes. Only it seems that this time the keyframe in question had to be inside the same CSS file for it to work. Very strange.

Anyways, from now on having keyframes inside another external CSS file is noted as bad practice.

Answer 1

Seems to work fine if you include the keyframes like @Akshay mentioned.

#navigation {
    position:relative;
    width: 100%;
    padding: 15px;
}
#navigation ul {
    list-style-type: none;
}
#navigation ul > li {
    position: relative;
    float:left;
}
#navigation ul > li > * {
    float: left;
}
#navigation ul.nav_sub_menu {
    overflow:hidden;
}
#navigation ul.nav_sub_menu > li {
    width: 100%;
}
#navigation div.nav_sub_menu_wrapper {
    position: absolute;
    overflow:hidden;
    top: 42px;
    max-height: 0;
}
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper {
    z-index: 99;
    max-height: 500px;
}
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu {
    /* iE doesn't play nice with shorthand play-state, but it's initially running so it's redundant */
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;

    -webkit-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Chrome 4.3 | Edge | Safari 4.0 - 8.0 */
    -moz-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Firefox 5.0 | Gecko 16.0 */
    -o-animation: slideDown 500ms linear 0ms 1 normal forwards; /* Opera 12 */
    animation: slideDown 500ms linear 0s 1 normal forwards; /* Modern browsers */
}
@keyframes slideDown{
    from {
        max-height: 0;
    }
    to {
        max-height: 500px;
    }
}
#navigation a.nav_button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;
    float: left;
    padding: 10px 25px 10px 15px;
    border: 1px solid black;
    font-size:1.2em;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation a.nav_button:hover {
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */
}

<section id="navigation">
		<nav>
			<ul>
				<li>
					<a href="javascript:void(0)" class="nav_button">Home</a>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">Portfolio</a>

					<div class="nav_sub_menu_wrapper">
						<ul class="nav_sub_menu">
							<li><a href="javascript:void(0)" class="nav_sub_button">About me</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Goals</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li>
						</ul>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">About</a>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">Contact</a>
				</li>
			</ul>

		</nav>
	</section>

You can also do this without an animation, and simply transition max-height and it will animate both ways.

#navigation {
    position:relative;
    width: 100%;
    padding: 15px;
}
#navigation ul {
    list-style-type: none;
}
#navigation ul > li {
    position: relative;
    float:left;
}
#navigation ul > li > * {
    float: left;
}
#navigation ul.nav_sub_menu {
    overflow:hidden;
    
}
#navigation ul.nav_sub_menu > li {
    width: 100%;
}
#navigation div.nav_sub_menu_wrapper {
    position: absolute;
    overflow:hidden;
    top: 42px;
    max-height: 0;
    transition: max-height .5s;
}
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper {
    z-index: 99;
    max-height: 500px;
}
#navigation a.nav_button:hover + div.nav_sub_menu_wrapper ul.nav_sub_menu {
    max-height: 500px;
}

#navigation a.nav_button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;
    float: left;
    padding: 10px 25px 10px 15px;
    border: 1px solid black;
    font-size:1.2em;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation a.nav_button:hover {
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */
}

<section id="navigation">
		<nav>
			<ul>
				<li>
					<a href="javascript:void(0)" class="nav_button">Home</a>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">Portfolio</a>

					<div class="nav_sub_menu_wrapper">
						<ul class="nav_sub_menu">
							<li><a href="javascript:void(0)" class="nav_sub_button">About me</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Goals</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li>
							<li><a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li>
						</ul>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">About</a>
				</li>
				<li>
					<a href="javascript:void(0)" class="nav_button">Contact</a>
				</li>
			</ul>

		</nav>
	</section>