Question

I have a menu list that is floated left for the main headings:

When a menu item with a submenu has a hover state, the submenu drops down, but pushes the menu to the right if it is wider than the main heading (spacing between ‘shop’ and ‘about’ — as expected I suppose):

I’m trying to get the submenu to maintain its height (to push down the content below it on the page), but not push the items to the right over based on its width.

Using position: absolute just ignores the height of the submenu when its open.

Hoping there is something I’m missing.

Thanks for your help!

Answer 1

Try setting the width of the submenu to be that of the parent menu and then setting:

text-overflow: inherit;
overflow: visible;

On the submenu