Grow your CSS skills. Land your dream job.

Creating same sized drop down boxes

  • # 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:

    http://cdpn.io/rylmw

    Thank you in advance,

    tjgriffiths1

    # March 29, 2014 at 9:20 am

    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

    # 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 7:50 am

    Here’s version without floats and just 7 lines of code.

    # 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 10:32 am

    @Atelierbram :) go fot it, let us know when you got it. As far as flexbox, I haven’t spend much time with it so I don’t have a good understanding of it yet. Here is my first try about a week ago, but I am unsure about how I hacked it up in media query.

    # March 30, 2014 at 11:09 am

    The downside of the inline-block here is that requires the elimination of the closing list item tag. While still valid, it’s not a very good practice. The 20% width fails otherwise (unless you get into some hacks). This is perfect example of where a float, imho, is better than inline-block (which admittedly is better in other situations).

    # 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 11:53 am

    @wolfcry911 they-re all good and valid points you make, but at the end what it comes down to is a matter of preference. If floats suit you better I’d never say you wrong.

    For some time I did use floats myself on nav class selectors or in grids and I never really felt comfortable with clear fix hacks or using overflow.

    Coincidentally, this morning I’ve been doing some final testing using inline block display on nav, sub nav and grid and somehow I feel better about it than using floats. Sure, I do omit closing list item tags to deal with white space and as you say it is valid, and in my opinion better then using hacks like 0 font size on parent or negative margins on element itself.

    # March 30, 2014 at 12:13 pm

    I’ll agree it comes down to preference in this case. To me using overflow is natural (it is in the specs) and the clear fix containing method is brilliant. A couple of notes: in this particular situation the floats don’t even need containment! Just move the background from the nav to the li and it’s all good. The other thing is there are even more methods for float containment, one of which the OP’s code had – to float the ul.

    # March 30, 2014 at 12:49 pm

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

    # March 30, 2014 at 12:59 pm

    You can be so thorough sir :)

    He always is cause he is one of the few who has master the CSS, that’s why I love to read his posts (replies).

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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

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