• # March 29, 2014 at 9:04 am

    Hey awesome community.

    I am trying to get my head around making a drop down menu bar using css. I have created this bar (see html / css) but am really struggling with getting my head around the size of each ‘li’ element, and their subsequent drop down items. The way I have spread each of my 5 ‘li’ elements is by defining each box width at 18%. Obviously I cannot do this for the drop down box, so am wondering how to make them the same size?

    Here is the codepen:

    Thank you in advance,


    # March 29, 2014 at 9:20 am

    This will get you started:

    #navlist li:hover ul {

    BTW…the -9999px thing has a real performance hit.

    Here’s one I keep around for reference:

    # March 29, 2014 at 9:24 am

    Also notice how Paulie_D’s example uses the child combinator selector > , which selects only the first direct list-elements, instead of all of the child list-elements.

    # March 29, 2014 at 4:29 pm

    Thank you Paulie_D & Atelierbram! I am seriously in awe of your skills. Do you have any recommendations as an alternative to using ‘-9999px’ ?

    # March 29, 2014 at 4:45 pm

    visibility: hidden like in Paulie_D’s codepen example, or my fork of your codepen

    # March 30, 2014 at 10:19 am

    @jurotek for this thing inline-block could indeed be a better fit. I never feel quite comfortable with it, but that’s just me … Could be interesting making this work as flexbox: display: flex, with display: inline-block as fallback. Might fork your fork of my fork for that :\

    @tjgriffiths1 The negative top margin on the nav in my example, with the top-border of the body as kind of “pseudo background”, is no longer needed when you would go with inline-block instead of floats. But if you would ever want to change the source order of the HTML markup, and put the header with h1 before the nav, then pulling an element up with negative top margin is a useful trick to keep in mind.

    # March 30, 2014 at 11:38 am

    Didn’t noticed that, that is weird. Don’t really understand, … does this has to do with fighting-the-space-between-inline-block-elements ?

    # March 30, 2014 at 12:49 pm

    You can be so thorough sir :)

    Just move the background from the nav to the li and it’s all good.

    Have you tried to getting the alignment right with this method? Wouldn’t that involve using some ‘magic numbers’?

    In my mind one can make it much easier, and also more bulletproof (giving away my preference here) when separating concerns (aesthetic and structural ) like I did in my fork with pulling-up-of-an-element with negative top margin. Only slight ‘ugly’ bit is the min-height on the nav and ul, not really magic numbers though …

    # March 30, 2014 at 1:07 pm

    Most of the time I try to avoid the word always ;\ For example, his latest comment on that horizontally-scroll thread is worthy of a blog-post, and yes, I love to read all that intricate stuff too.

    # March 30, 2014 at 1:58 pm

    Yes, well that vertical alignment (top of the links in the sub list-items – with the bottom of the white background ) is what I had in mind from the start of making that fork. Kind of thinking ahead there: if that’s the design that is wanted/needed (which I like) then that’s what’s comes first in my book.

    On formulating: what can drive me up the wall, as a non-native English speaker, is abbreviations, like for example the one you used just now: “OP”. Stands for Original Pen, no? I’m nitpicking here, but a thing like that can stop me in my tracks for a moment when reading. But never mind, I have that with listening to podcasts too, missing a punchline because of some <abbr>BS</abbr> abbreviation ;!

    # March 30, 2014 at 4:39 pm

    Don’t be sorry, I am laughing out loud!

    Also reminds me of that big nineties hit by “Naughty by Nature“, that one is more ambiguous though.

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

You must be logged in to reply to this topic.