[Solved] Make this horizontal drop-down menu stretch the width of the screen?

[Sean]

Hello! I’m attempting to make a full-width, CSS drop-down menu, where the sub-menu ‘ul’ items are offset slightly to the left of their parent.

Here’s the goal, from my designer: http://i.imgur.com/R5rLdqx.jpg

And what I’ve made, so far: http://i.imgur.com/GqjwqVl.png

I’ve run into two problems:

1. I have to set a width on my sub-menu ul (in the CodePen link below, 200px), as it doesn’t stretch to fit the ‘li’ elements within, and;
2. I’m stumped when it comes to making the sub-menu stretch to fill the width of the screen, as in the designer’s image.

Here it is on CodePen: http://codepen.io/anon/pen/aKfbI

Thanks! Love this forum.

[Paulie_D]

I’m sure I’m missing something…this should be easy but I’m having trouble with it.

Giving the submenu an absolute position and centering the internal list items under the parent li is tricky.

[Sean]

@Soronbe: It’s like magic!

I see you added ‘margin: 0 -9999px; padding: 0 9999px;’ to .main-navigation ul li:hover > ul

Everything works great on CodePen, but on my development site the li items in the sub-menu are vertical, not horizontal. The sub-menu ul seems to be taking its width from the parent li.

Here’s a screenshot.

I’ve tried to see if other CSS on the site is affecting it, but no dice yet.

[Sean]

Sorry: The development site is running on a localhost, so I have no link to send!

BUT: @Atelierbram’s implementation of @Soronbe’s idea (link) is almost there.

It seems the box-sizing: inherit in the reset is fixing the problem with the vertical/horizontal resizing, though it’s had the unintended consequence of pushing the menu up to the top of the page.

Screens: no hover / hover

Here’s a revised pen that includes my entire stylesheet: http://codepen.io/anon/pen/aplcz

[Sean]

@Atelierbram Aha. WordPress automatically outputs that code so I had to figure out how to get rid of it. Done.

The menu works! Amazing.

BUT: The * {box-sizing:inherit} is somehow screwing up formatting on a few other parts of the site. (I see my CSS, which is pulled from Underscores.me has a box-sizing: border-box reset.)

Is there a way to isolate your reset so it applies only to the nav menu, or should I re-adjust the rest of the site to compensate for the change?

(Apologies: I don’t know a lot about border-box)

[Sean]

You’re a genius! Thank you.

[Author]

Posts