horizontal dropdown menu w/full width submenu divs
# January 21, 2013 at 1:53 am
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# January 21, 2013 at 8:15 am
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/# January 21, 2013 at 8:23 am
Or you could just buy it for $5. http://codecanyon.net/item/css3-mega-drop-down-menu/126387
This has a ‘Full Width Variant”# January 21, 2013 at 5:05 pm
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?# January 21, 2013 at 7:35 pm
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
You must be logged in to reply to this topic.