|
Posted by z on 11/06/06 15:29
Ben C wrote:
> On 2006-11-03, z <z> wrote:
>> 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.
That worked perfectly. Thanks.
Navigation:
[Reply to this message]
|