Top align horizontal menu sub-items
Posted: Thu Nov 03, 2011 5:15 am
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.

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

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?