Top align horizontal menu sub-items

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Top align horizontal menu sub-items

Post 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?
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: Top align horizontal menu sub-items

Post 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.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Top align horizontal menu sub-items

Post 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.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Top align horizontal menu sub-items

Post by papa »

Hi,

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