Grow your CSS skills. Land your dream job.

horizontal dropdown menu w/full width submenu divs

  • # January 21, 2013 at 1:53 am

    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

    # 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 8:29 am

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

    # January 21, 2013 at 8:30 am

    Clever solution @wolfcry911. I like it. :)

    # January 21, 2013 at 4:13 pm

    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

    # January 21, 2013 at 4:26 pm

    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

    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

    # January 21, 2013 at 5:05 pm

    @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?

    # 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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".