Creating same sized drop down boxes

[tjgriffiths1]

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:

http://cdpn.io/rylmw

Thank you in advance,

tjgriffiths1

[Paulie_D]

This will get you started:

#navlist li:hover ul {
  left:0;
  width:100%;
}

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

Here’s one I keep around for reference: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[Atelierbram]

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.

[tjgriffiths1]

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

[Atelierbram]

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

[Atelierbram]

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

[Atelierbram]

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

[Atelierbram]

@wolfcry911
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 …

[Atelierbram]

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.

[Atelierbram]

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 ;!

[Atelierbram]

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.

[Author]

Posts