Posted by Ben C on 11/03/06 22:24

On 2006-11-03, z <news01.web@mailnull.com> wrote:
> I'm trying to make a horizontal dropdown menu in CSS something like this:
> http://www.weblens.org/templates/sample_menu.html
>
> The difference is that I want the secondary menu items to always be flush
> with the left side, not starting under the parent list item.
>
> Instead of:
>
> Item1....Item2....Item3
> ..................Item3-sub1....item3-sub2
>
> I want it like this:
>
> Item1....Item2....Item3
> Item3-sub1....item3-sub2
>
> (Periods added in the above example to make sure that the spacing is correct
> if you are viewing it in a monospace font.)
>
> Is there a way to do this in CSS?

Of course, there are many ways.

It can be achieved with two small changes to the example you posted.

1. Get rid of position: relative from the selector for #mainMenu li

This changes the containing block of the ul.inner from the li above it
to what is now the nearest positioned ancestor which looks like
#mainMenu. #mainMenu is a normal block-level element with its outer
margin edge aligned to the left of its container (the body), not a float
some distance across the page, so this gives us a suitable reference
point for positioning the pop-ups to the left side.

2. Change left: auto in the selector #mainMenu li>ul to left: 0

left: auto here means "go roughly where you would have gone if you'd
been normal flow rather than positioned", which is aligned to the left
of the parent list item since, if we'd been normal flow, the parent list
item would have been our containing block. That's not where we want to
be though, we want to be 0px from the left of our container (now that
we've made our container #mainMenu). So we just change auto to 0.

[Back to original message]