Ok, so this test model works

Code html:
<!DOCTYPE html>
<html>
	<head>
		<title>Scroll Menu Test</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
 
			body { padding: 2em; font-size: 1em;}
 
			ul { list-style: none; }
			.dropdown { 
				overflow: hidden;
				width: 18em;
				background: red;
				top: 100%;
				left: 0;
				z-index: 10;
			}
 
			.dropdown>div {
				background: yellow;
				margin-top: -26em;
				-webkit-transition: margin-top 1s;
			}
 
			.header .nav>ul {
 
			}
 
			.header .nav>ul>li {
				display: inline-block;
			padding: 1em;
			background: black;
			position: relative;
			}
 
			.header .dropdown {
				position: absolute;
			}
 
			.header .nav>ul>li:hover .dropdown {
 
			}
 
			.header .nav>ul>li:hover .dropdown>div {
				margin-top: 0;
			-webkit-transition: margin-top 1s;
}
 
			.dropdown li {
				padding: 1em;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<ul>
					<li><a href="#">Menu</a>
						<div class="dropdown">
							<div>
								<ul>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
									<li><a href="#">Option</a></li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Now, my problem is that I can't lock all my menus to the same height, it needs to be dynamic with content. Also, I'm not quite sure why I'm needing to use 26ems for the negative margin to create the animation. I was hoping -100% would work, but it doesn't. Anyone done this effect successfully before?