- This topic is empty.
January 21, 2013 at 1:53 am #42145
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/JCBemJanuary 21, 2013 at 8:15 am #121723Paulie_DMember
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 #121731Paulie_DMember
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 8:29 am #121730
remove the position: relative from the li and place it on the ulJanuary 21, 2013 at 8:30 am #121734Kitty GiraudelParticipant
Clever solution @wolfcry911. I like it. :)January 21, 2013 at 4:13 pm #121758
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?January 21, 2013 at 4:26 pm #121760
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!January 21, 2013 at 4:27 pm #121761
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 #menuJanuary 21, 2013 at 5:05 pm #121770
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 #121806
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
- The forum ‘CSS’ is closed to new topics and replies.