Align UL mega menu to the left

Hi there,

I have the following mega menu:

At the moment, the submenu drops down in line with where the navigation starts. What I would like to do is to have the sub menu start where my container starts. I can do this by giving it a negative margin or negative left: value, but this doesn’t work when the window is shrunk or on tablet.

What would be the best way to align it to the left of the container? Is there a way to break it out of the current structure that is: [code]

    • sub menu
[/code]

Thanks!

Hi,

The submenu is positioned relative the nearest ancestor that has position set(*). Now the li parent has postion and the submenu takes its coordinates relative the li.

Try remove the position on the li parent and instead put it on the container, the submenu will then take its coordinates according to the container. Because now the container is the nearest ancestor to the submenu that has position.

Mind that there can’t be any other ancestor between the submenu and the container that has position, if so remove that too.

(*)
Only an ancestor/parent that has position can “contain” an absolute positioned child.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.