Animated drop down menu won't work if relative... Need help with fixing

HTML & CSS
1

Ok, so this test model works


<!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?

2

That is because margins, even vertical ones, are calculated based on the WIDTH of the container. Yeah, that’s nuts, but it’s true.

for example, using : .dropdown>div {margin-top: -100%;}
change .dropdown to { width: 8em; } and see the effect, then try { width: 38em; }

also note that in order to use top|bottom |left|right and/or z-index you must give the elememt position:relative|absolute|fixed

3

So, it’s impossible then since the width is static and the height dynamic. Is this spec or just a popular bug?

4

It’s the spec and ,yes, it would be impossible using vertical margins.
You could position the child element out of view, using position:relative, of course the parent would remain open, and you would have to approach this from a completely different angle as far as CSS and HTML are concerned.

5

Hi,

I’d just give it a margin bigger than you will ever need. The slight delay will actually enhance the menu and stop it being triggered accidentally when hovering much like the js hover-intent plugin.:slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	list-style:none;
}
#nav { }
#nav > li {
	float:left;
	position:relative;
}
#nav > li > a {
	float:left;
	padding:0 20px;
	height:2em;
	line-height:2em;
	background:#fcf;
	border:1px solid #000;
	margin:0 -1px 0 0;
}
#nav a, #nav a:visited {
	color:#000;
	text-decoration:none;
}
#nav div {
	position:absolute;
	top:100%;
	overflow:hidden;
}
#nav ul a {
	color:#fff;
	padding:5px 15px;
	white-space:nowrap;
}
#nav ul a { display:block }
#nav li ul {
	position:relative;
	clear:both;
	background:#333;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
	margin-top:-99em;
}
#nav li:hover div ul { margin-top:0; }
</style>
</head>

<body>
<ul id="nav">
		<li><a href="#">Test</a>
				<div>
						<ul>
								<li><a href="#">start Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
						</ul>
				</div>
		</li>
		<li><a href="#">Test</a>
				<div>
						<ul>
								<li><a href="#">start Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
						</ul>
				</div>
		</li>
		<li><a href="#">Test</a>
				<div>
						<ul>
								<li><a href="#">start Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
								<li><a href="#">Sub nav</a></li>
						</ul>
				</div>
		</li>
</ul>
</body>
</html>
6

I actually considered that for awhile, but some of the menus are much larger than the others so the delay wouldn’t be consistent. For the moment I’ve went with a fade in / out effect instead and may revisit it later.

7