horizontal dropdown menu w/full width submenu divs

[idesignstuff]

Hello everyone,
I’m new to the site and am hoping someone can help me out with my code. My apologies if I make any noob mistakes posting here :)
I’m setting up a horizontal dropdown menu and what to have divs containing images and headline tags etc to hold content. My problem is that I want each dropdown div to align to the full 960px width of the wrapper. Instead each dropdown overlaps on the right more each time. Here is my code so far without any content added.

I used CodePen: http://cdpn.io/JCBem

[Paulie_D]

Hmm…this is because each dropdown is positioned as a child of the parent list item so it’s natural starting position is that of the list item and not the menu.

I recall seeing this resolved somewhere but I’ll have to do a search.

Hmmm…(not mine): http://jsfiddle.net/Pnn6V/9/

[Paulie_D]

Or you could just buy it for $5. http://codecanyon.net/item/css3-mega-drop-down-menu/126387

This has a ‘Full Width Variant”

[wolfcry911]

remove the position: relative from the li and place it on the ul

[Kitty Giraudel]

Clever solution @wolfcry911. I like it. :)

[idesignstuff]

Thanks for the responses, @wolfcry911 I tried positioning the ul as relative and it seems like this is on the right track but everything is relative to the window and not the nav bar…How would I adjust for that?

http://cdpn.io/JCBem

[idesignstuff]

Nevermind I got it now :) I had to change the position of #menu to absolute. Thanks again everyone for your responses, you greatly helped out a new aspiring developer!

[wolfcry911]

Have you tested on a real page? I’m pretty sure CodePen is messing things up (I’m encountering this more and more lately).

edit// you shouldn’t need absolute on #menu

[idesignstuff]

@wolfcry911
Oh really? I tested in my browser instead of codepen and I was getting the same result with the dropdown divs aligning to the edge of the browser instead of the navgation bar. When I changed the #menu to position: absoulute it fixed the problem. Does that mean I messed up somewhere else in the code or something?

[wolfcry911]

Not sure, in my tests outside of CodePen it worked. In CodePen, it works in edit mode, but not full screen mode – strange.

The absolute positioning will just as well as long as you account for it’s height elsewhere.

edit// I just checked the pen and noticed that you have the position: relative on #menu ul – but the ul is id’d as #menu, so just #menu would be the correct selector

[Author]

Posts