Page 1 of 1

Top align horizontal menu sub-items

Posted: Thu Nov 03, 2011 5:15 am
by papa
Hi,

Trying to make a mega menu but having problem aligning my sub items..

I've tried float, display: block and tons of other stuff but can't get i to align properly.

Code: Select all

<html>
<head>

<style>
.menu ul { padding: 10px;}
.menu ul li 
{ 
	position: relative;	
	top: 0;	left: 0; 	
	float: left;
	background: #dcdcdc;
	padding: 10px;
}

.menu ul li .content
{
	position: absolute;
	top: 100%; left: 0;
	background: green;
	width: 500px;
	float: left;
}
.menu ul li .content ul { float: left;}
.menu ul li .content ul li { float: none; background: lime;}
.menu ul li .content ul li .content2
{
	position: absolute;
	top: 0; left: 200;
	float: left;
	background: red;
}
#selected { background: #fff; color: #000;}
</style>

</head>

<body>

<div class="menu">
	<ul id="top">
		<li>my menu</li>
		<li>
			my menu2
		<div class="content">
			<ul>
				<li>sub1a</li>
				<li id="selected">
					sub1b
					<div class="content2">
						<ul>
							<li>sub2a</li>
							<li>sub2b</li>
							<li>sub2c</li>
							<li>sub2d</li>
						</ul>
					</div>
				</li>				
				<li>sub1c</li>
			</ul>
		</div>
		</li>
		<li>my menu2</li>
	</ul>
</div>

</body>
</html>
Image

I want sub2a to align horizontaly with sub1a. So no matter which sub1-item i hover it should always display the sub2-item on top of the green bg (or aligned with sub1a).

Any ideas?

Re: Top align horizontal menu sub-items

Posted: Fri Nov 04, 2011 3:37 pm
by Jade
Try setting a negative top and left margin on the second sub-menu to force it back into place because your padding is throwing everything off.

Re: Top align horizontal menu sub-items

Posted: Fri Nov 04, 2011 3:42 pm
by papa
The left margin is no problem, I can align it next to the first sub menu. If i set a specific top margin it will not align anyway though because the top margin differs depending on which link you hover.

Re: Top align horizontal menu sub-items

Posted: Mon Jan 02, 2012 8:42 am
by papa
Hi,

The answer is to set .menu ul li .content ul li to position: static.